16.Vuex 模块(Module)

Vuex的使用参考上篇文章 15.Vuex使用

为什么要分模块：

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

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

案例：

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

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

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

// 导入vue
import Vue from 'vue';
// 导入vuex
import Vuex from 'vuex';
// 使用vuex
Vue.use(Vuex);

//导入各个业务模块
import card from './card'
import photo from './card'
//构造store
const store = new Vuex.Store({
  // 模块化
  modules: {
      card: card,
      photo: photo
      // 如果还有其他模块依此写入
  }
});
// 导出store
export 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