模块化vuex状态管理

简介

我已经厌倦了在开发vue前端网站时将所用state，action，getter等放在一个vuex状态管理js文件中，这么重要的状态管理文件，应该是有条理的，各个功能的状态，方法应该有所区分，这样进行扩展或者调试时效率更高。所以这就需要一个可以自动import所有功能模块的代码，运行时自动加载到store里的index.js里。

import各个功能模块的状态管理代码到index.js

import Vue from 'vue'
import Vuex from 'vuex'

//我们利用webpack的api去module文件里遍历所有文件，并开启遍历子文件，凡是扩展名为.js的文件便被我们收集到了。
const modulesFiles = require.context('./modules',true,/\.js$/);
//我们开始遍历每个功能文件
const modules = modulesFiles.keys().reduce((modules,modulePath)=>{
//我们把文件路径里的‘/’和扩展名去掉来命名模块名称
const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1');
//将模块路径作为键带入modulesFiles获取对应的模块对象
const value = modulesFiles(modulePath);
//将每个模块对象放入modules中
//每个模块对象都包含了此模块对应的state，actions等
modules[moduleName]=value.default;
return modules;
},{});

//这样我们就把模块带入了vue store里。
const store = new Vuex.Store({
modules
});

export default store

对于各个模块来说只需根据以下模板进行功能开发即可：

const state = {
    
  }
  
  const mutations = {
    
  }
  
  const actions = {
    
  }
  
  export default {
    namespaced: true,
    state,
    mutations,
    actions
  }
  

总结

将各个功能进行模块化区分，可以尽可能的解耦各个模块之间的联系，也可以最大化代码重用。