vuex 模块化
一般当项目比较大时,如果vuex 的modules模块过多,此时需要用到模块化来管理仓库。如图是仓库相关文件
如果在index里引入modules中所有的文件,需在index.js中配置以下
import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
Vue.use(Vuex)
// https://webpack.js.org/guides/dependency-management/#requirecontext
//webpack中的方法
const modulesFiles = require.context('./modules', true, /\.js$/)
// you do not need `import app from './modules/app'`
// it will auto require all vuex module from modules file
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
// set './app.js' => 'app'
const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
const value = modulesFiles(modulePath)
modules[moduleName] = value.default
return modules
}, {})
const store = new Vuex.Store({
modules,
getters
})
export default store
比如在addController.js中定义一个变量
const state = {
compatible: null
}
const mutations = {
CONTROLLER_COMPATIBLE: (state, data) => {
state.compatible = data
}
}
const actions = { // 赋值函数
saveCompatible({ commit }, data) {
commit('CONTROLLER_COMPATIBLE', data)
}
}
export default {
namespaced: true,
state,
mutations,
actions
}
在getters.js中获取该属性
const getters = { // 全局用到相关参数对象
compatible: state => state.addController.compatible,
}
export default getters
页面中存state属性
//对应modules下addController的路径下saveCompatible方法
this.$store.dispatch('addController/saveCompatible',false)
页面中通过getter取state属性
this.$store.getters.compatible