在 store/index.js 中写入
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
此时只要在 store/modules 目录下定义相应的内容就行了
如在 store/modules/app.js 定义VueX模块的内容
const state = {
sidebar: {
opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : false,
withoutAnimation: false
},
device: 'desktop',
language: getLanguage(),
loading: {},
}
const mutations = {
SET_ROUTER_BEFORE_TIME: (state, time) => {
state.routerBeforeTime = time
},
}
const actions = {
setRouterBeforeTime({ commit }, time) {
commit('SET_ROUTER_BEFORE_TIME', time)
},
setCurClueCode({ commit }, clueObj) {
commit('SET_CUR_CLUE_CODE', clueObj)
},
}
export default {
namespaced: true,
state,
mutations,
actions
}
一般调用
this.$store.dispatch('app/setCurClueCode', arguments)
一般取值
this.$store.state.app.device
