vuex分模块用法

前言：正常情况下是不需要这些操作的，但是当项目大了以后或者人多了以后，如果每个人都去修改公共的store就可能会造成代码冲突等。

第一步：安装vuex

npm i vuex -S

第二步：新建stote文件夹=>新建index.js和modules文件夹，结构如下：

• index.js文件内容：

  import Vue from 'vue'
  import Vuex from 'vuex'
  
  Vue.use(Vuex);
  
  import modules from './modules';
  
  export default new Vuex.Store({
    state: {
    },
    mutations: {
    },
    actions: {
    },
    modules
  })
  

第三步：新建index.js和模块js。注意：这里的index.js指的是modules中的index.js

• modules/index.js内容：

  const files = require.context('.', false, /\.js$/);
  const modules = {}
  
  files.keys().forEach(key => {
    if (key === './index.js') return;
    modules[key.replace(/(\.\/|\.js)/g, '')] = files(key).default
  });
  
  export default modules;
  

• home.js文件内容（模块js）

  const state = {
      arr:[]
  };
  
  const mutations = {
      INSERTNUM(context,args){
          context.arr = state.arr.concat(args);//可以通过commit('模块名/方法名')操作，例如：commit('home/INSERTNUM')
      }
  };
  
  const actions = {
      ASYNCNUMDATA(context,args){
          context.commit('INSERTNUM',args);//可以通过dispatch('模块名/方法名')操作，例如：dispatch('home/ASYNCNUMDATA')
      }
  };
  
  const getters = {
      newarr:(state, getters, rootState, rootGetters)=>{
          //这里可以做一些操作
      }
  };
  
  export default {
      namespaced:true,//命名空间
      state,
      mutations,
      actions,
      getters
  };
  

第四步：在vue组件中使用：这里以Home.vue文件为例：

• Home.vue

  <template>
      <div>
          <button @click="add">增加</button>
          <div v-for='(v,i) in gg' :key='i>{{v}}</div>
      </div>
  <template>   
  
  <script>
  	import { mapState, mapActions, mapGetters } from 'vuex';
  	export default {
    	computed: {
            ...mapState({
                gg:state=>state.home.arr
            })
        },
        methods: {
          ...mapActions([
              'home/ASYNCNUMDATA'
          ]),
          ...mapGetters([
              'home/GETARR'
          ]),
          add(){
              const ma = [4,5,6];
              this['home/ASYNCNUMDATA'](ma);
              console.log(this['home/GETARR']);
          }
        }
    }