Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 使用的时候需要我们基于脚手架初始化项目。

• 第一步：npm i vuex --save/-S
• 第二步： 创建store.js import vuex from 'vuex' import vue from 'vue'
• 第三步：Vue.use(vuex)
• 第四步：const store = new Vuex.Store({...配置项})
• 第五步：导出 export default store
• 第六步：导入main.js

状态state

• 这一步用来存储所有组件的数据

const store = new vuex.Store({
    state: { 
       number: 0 
    } 
})

• 在组件中使用

<div>数据：{{$store.state.number}}</div>

• 计算属性

count () { return this.$store.state.number }

状态修改mutations

• 这一步为了便于管理、监控所有数据的变化，vuex规定必须通过mutations修改数据，不可以通过store修改状态数据。

mutations: {
//这里以购物车的加减为例
    shoppingCartAdd (state, payload) {   //自定义名字
        // state表示Store中所有数据
        // payload表示组件中传递过来的数据
        state.number = state.number + payload
    },
    shoppingCartDec (state, payload) {
      state.number = state.number - payload
    }
}

• 在组件中的使用

methods: {
    ...mapMutations(['shoppingCartAdd','shoppingCartDec'])
}

异步操作action

这一步主要用于异步处理，一般搭配axios使用

• 定义

actions: {
    // 定义了一个action，用于查询接口数据
    async queryData (context, payload) {
        const ret = await axios.get('url')
        context.commit('shoppingCartAdd', ret.data.list)
    }
}

• 在组件中的使用

methods: { 
        handleQuery () { 
        this.$store.dispatch('queryData', 200) 
     }
}

getters

buyList () {
  return this.$store.getters.getCartList;
},