本文共 4774 字，大约阅读时间需要 15 分钟。

vuex官网API

vuex其实就是数据仓库，用来管理数据，适用于大中型项目，当组件之间数据需要共享时，数据被改变时，组件全部被更新。

vuex 核心概念:

1. state：变量定义和初始化（组件中使用：this.$store.state.XX 获取)2. getters：以get方法 供外部调用来获取state值（组件中使用：this.$store.getters.XXX 获取）3. mutations：mutations作用主要是改变state中的值，通过commit('XXX')触发mutations中的方法，mutations中的方法必须是同步的，如果是异步的要放入actions中(组件中使用：this.$store.commit('XXX') 操作)4. actions：actions中的所有操作都是异步的（具体业务操作），也可以提交mutations改变state值(组件中使用：this.$store.dispatch('XXX') 操作)5. modules：将 store 分割成模块，每个模块都有自己的state、getters、mutations、actionsPS：1 - 4 操作可以通过导入模块映射方式以this.XXX来操作，详情见案例

案例

1.在src/main.js中使用vuex

....省略路由和其他组件导入方式........// 导入vueximport store from './store'//使用sotrenew Vue({  el: '#app',  router,  store,  // vuex  components: { App },  template: '
   '});

2. src/store/index.js (vuex配置)

// 导入vueimport Vue from 'vue'// 导入vueximport Vuex from 'vuex'// 使用vuexVue.use(vuex);//配置：const store = new Vuex.Store({   // 变量定义和初始化  state:{    num: 1  },  // 提供get方法 供外部调用,参数只有state  getters: {    getNum(state){        return state.num;    },    // 通过参数getters方式调用其他get方法    getNum2(state, getters){      return getters.getNum;    }  },  // mutations作用主要是改变state中的值，通过commit('XXX')触发mutations中的方法，mutations中的方法必须是同步的，如果是异步的要放入actions中  mutations: {    //    changeNum(state){      //setTimeout(function(){ // 模拟异步操作        state.num++;      //}, 10)    },    //方法第二个参数为外部传入，只能有一个，如果多个参数，第二个参数定义成对象    changeNum2(state, num){      state.num+=num;    }  },  // 异步操作，提交mutations改变state值，actions中的所有操作都是异步的  actions:{    // 第一个参数直接以store接收    changeNumFun(store){        setTimeout( function(){ // 模拟异步操作，实际值是时时改变的          store.commit('changeNum');        }, 100);    },    //第一个参数以commit接收，第二个参数只能有一个，如果多个值定义成对象    changeNumFun2({commit}, num){      commit('changeNum2', num)    },    // 异步操作 await等待返回    async changeNumFun3(store){      console.log('开始fun3');      var data = await store.dispatch('changeNumFun4');      console.log(data);      console.log('结束开始fun3');      // 打印结果： 开始fun3、{'id': '111', name: 'zsstore'}、结束开始fun3      // 如果不使用await data输出放在最后    },    changeNumFun4(store){         return new Promise(resolve => {            setTimeout(() => {              var data = {'id': '111', name: 'zsstore'};              resolve(data);            }, 1000);        });    }  }});// 导出export default store;

3.src/page/vuex/index.vue(vuex案例)

 

Vuex的使用参考上篇文章

为什么要分模块：

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。

为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：

案例：

1. 在src/main.js中使用vuex

....省略vue等其他导入....// 导入vueximport store from './store/modules'// 实例化vue，将vuex传入vue中new Vue({  ...  store,  ...});

2.在src/store/modules.js中配置vuex

// 导入vueimport Vue from 'vue';// 导入vueximport Vuex from 'vuex';// 使用vuexVue.use(Vuex);//导入各个业务模块import card from './card'import photo from './card'//构造storeconst store = new Vuex.Store({  // 模块化  modules: {      card: card,      photo: photo      // 如果还有其他模块依此写入  }});// 导出storeexport default store;

3. src/store/card/index.js (卡功能)

const card = {  /**   * 定义命名空间，防止多个模块同名共享，使用时需要带上命名空间   */  namespaced: true,  state: {    cardArr: [],  },  mutations: {    addCard(state, obj){        state.cardArr.push(obj);    }  },  actions: {      addCardFun(store, obj){        store.commit('addCard', obj);      }  }}//导出export default card;

4.src/store/photo/index.js (照片功能)

const state = {  photoArr: []}  const mutations = {  addPhoto(state, obj){    state.photoArr.push(obj);  }}const actions = {  addPhotoFun({commit}, obj){      commit('addPhoto', obj)  }}const photo = {  /**   * 定义命名空间，防止多个模块同名共享   */  namespaced: true,  state: state,  mutations: mutations,  actions: actions}export default photo;

5.src/page/store/modules.vue

6.子组件src/page/vuex/storeVue.vue

作者：圆梦人生 链接：https://www.jianshu.com/p/aa022b1c6686 來源：简书 简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。