vuex模块的普通用法

公司技术栈vue，所以状态管理用到了vuex，使用单一的状态树去管理所有的状态会让应用变得很复杂，store对象也会变得很臃肿。为了解决这个问题，就用到了module模块。每个模块拥有自己的state、mutation、action、getter。下面举一个简单的例子：

首先，创建一个store.js:

import Vue from 'vue';
import Vuex from 'vuex';
//引入子模块
import moduleA from './moduleA';
import moduleB from './moduleB';

Vue.use(Vuex);

export default new Vuex.Store({
    //这里的state就是全局的
    state: {
        count: 10
    },
    //注册模块
    modules: {
        a: moduleA,
        b: moduleB
    }
});

moduleA文件：

const moduleA = {
    namespaced: true, //命名空间，可以使该模块成为有命名空间的模块，具有更高的封装度和复用性
    state: {
        name: '张三',
        sex: '男',
        list: [
          {id: 1, msg: '我的生活'},
          {id: 2, msg: '抽烟'},
          {id: 3, msg: '喝酒'},
          {id: 4, msg: '烫头'}
        ]
    },
    getters: {
        listData(state) {
            return state.list
        }
    },
    mutations: {
        getName(state) {
            return '名称：' + state.name;
        }
    }
};

export default moduleA;

moduleB文件：

const moduleB = {
  namespaced: true,
  state: {
    name: '陈小凤',
    sex: '女',
    count: 2
  },
  mutations: {
    getName(state) {
      return '名称：' + state.name;
    },
    increment(state) {
      state.count++;
    }
  },
  actions: {
    incrementHandle({state, commit, rootState}) {
        //这里的state就是指当前模块的state数据，rootState指的是全局state
      if ((state.count + rootState.count) < 15) {
        commit('increment');
      }
    }
  }
};

export default moduleB;

vue文件：

<template>
  <div id="app">
    <h2>{{name1}}</h2>
    <h2>{{name2}}</h2>
    <h2>{{count}}</h2>
    <ul>
      <li v-for="item in list" :key="item.id">{{item.msg}}</li>
    </ul>
    <button type="button" name="button" @click="addCount">计算</button>
  </div>
</template>

<script>
import {mapState, mapGetters, mapActions} from 'vuex';
export default {
  name: 'App',
  computed: {
    ...mapGetters('a', {
      list: 'listData'
    }),
    ...mapState('a', {
      // name1: state => state.name
      name1: 'name'
    }),
    ...mapState('b', {
      name2: state => state.name,
      count: state => state.count
    })
  },
  methods: {
    ...mapActions('b', ['incrementHandle']),
    addCount() {
      this.incrementHandle();
    }
  }
}
</script>