vuex多文件配置 - Kaiqisan

大家好，都吃晚饭了吗？我是Kaiqisan,是一个已经走出社恐的一般生徒,当我们的项目渐渐大起来的时候，我们存放在vuex里面的数据也会渐渐变多,尤其在一些可视化操作页面项目中，用到的全局属性是爆炸多，这个时候，vuex中的数据太过，调用和编写都会变得非常麻烦，我们该如何分配资源呢？

这个时候单个vuex文件已经无法支持目前的项目了，需要创建多个文件,步骤如下

• 把所有的state文件都存放到modules中
  
• 然后开始编写vuex入口文件 index.js

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'

Vue.use(Vuex)

const modulesFiles = require.context('./modules', true, /\.js$/)
const modules = modulesFiles.keys().reduce((modules, modulePath) => { 
	// modulesFiles.keys()获取所有js文件的相对路径
    const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1') 
    // 对文件路径进行处理，获取文件名 比如 './app.js' => 'app'
    const value = modulesFiles(modulePath) 
    // 获取一个js文件(state)下的所有信息,这一步相当于 -- import 路径
    modules[moduleName] = value.default 
    // 整合到一个对象modules中
    return modules
    // 开始下一个迭代，直到所有文件被浏览
}, {})

const store = new Vuex.Store({
    modules,
    getters
})

export default store

上面代码的核心是利用require.context抓取一个路径下的所有的文件,然后整合所有数据,最终实现数据的分类，便于开发
require.context的知识详见 js require.context - Kaiqisan

原先的state， 文件是单一的文件

/* 原先的state */
const state = {
	name: 'kaiqi'
	uid: 10001
}

... //这里不多赘述

现在的state， 有多个文件 user.js app.js

/* 现在的app.js */
const state = {
	isOpen: true
}

const mutations = {
	....
}

const actions = {
	...
}

export default {
    namespaced: true, 
    // namespaced: true 的方式使其成为带命名空间的模块。保证在变量名一样的时候，添加一个父级名拼接。
    // 例： SET_NAME => user/SET_NAME
    state,
    mutations,
    actions
}

• 修改getter.js

/* 原先的 */
const getters = {
	name: state => state.name,
	uid: state => state.uid
}

/* 现在的 */
const getters = {
	name: state => state.user.name,
	uid: state => state.user.uid
}

毕竟getter要跟随state的步伐（记得不要重名，如果在不同的文件出现一样的参数名的话在getter这里的命名一定要不一样，要区分出来，否则出大问题）

• 投入使用
  （前排提示 使用mapGetter导入的方法还是一样的）

调用参数

在vue文件中直接使用 this.$state.state.[文件名].[参数名]
比如

this.$store.state.user.name

在js文件中需要导入vuex入口文件index.js

这里直接举例

import store from '@/store'

....

console.log(store.state.user.name)

调用方法

// 老
this.$store.commit('SET_NAME', val)

// 新
this.$store.commit('user/SET_NAME', val)

这对异步方法dispatch， getter的调用也同理

总结

不要为难自己，该封装的就要封装，麻烦是一时的，爽是一直的！