对vuex分模块管理

为什么要分模块：

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter(模块大的话可以把 state、mutation、action、getter拆分成独立的文件)。

案例

src/store/card/index.js (子模块)

方式一：state、mutation、action、getter统一写在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;

方式二：state、mutation、action、getter拆分成独立的文件

src/store/card/state.js

export default {
  cardArr: []
}

src/store/card/mutations.js

export default {
  addCard(state, obj){
      state.cardArr.push(obj);
  }
}

src/store/card/actions.js

export default {
  addCardFun(store, obj){
    store.commit('addCard', obj);
  }
}

src/store/card/index.js (子模块)

import state from './state'
import getters from './getters'
import mutations from './mutations'
import actions from './actions'

export default {
  namespaced: true,
  state,
  getters,
  mutations,
  actions
}

src/store/index.js(在总的store中中配置vuex)

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
import card from './card'
//构造store
const store = new Vuex.Store({
  // 模块化
  modules: {
    card: card
  }
});
export default store;

在card.vue中使用store里的数据

<template>
  <div>
      显示卡列表：<button @click="onAdd">追加卡信息</button>
      <ul>
        <li v-for="(result, index) in cardArr" :key="index">
          卡号：{{result.no}} <br>
          昵称：{{result.name}}
        </li>
      </ul>
  </div>
</template>
<script>
  // 导入state、mapMutations、actions
  import { mapState, mapMutations, actions   } from 'vuex';
  export default {
    data(){
      return {
      }
    },
    computed:{
      // 映射带有命名空间的state，第一个参数模块名
      ...mapState('card', [
        cardArr: state => state.cardArr
      ])
    },
    methods: {
      // 映射带有命名空间的mutations，第一个参数模块名
      ...mapMutations('card' ,[
        'addCard',
      ]),
      // 映射带有命名空间的actions，第一个参数模块名
      ...mapActions('card', [
        'addCardFun'
      ])
      onAdd(){
        ...
        //this.$store.commit('card/addCard', data);
        this.addCard(data);
        // 通过actions调用
        //this.$store.dispatch('card/addCardFun', data)
        this.addCardFun(data);
      }
    }
  }
</script>