vuex的模块化自动引入
在vue项目根目录中添加如下图文件夹
其中modules 文件夹用于分模块存放全局数据,比如我创建一个user的模块
const user = {
namespaced: true,//开启命名空间
state: {
id: '',
name: '',
tel: '',
theme: 'light'
},
mutations: {
setUser(state, user) {
state = Object.assign(state, user)
},
dltUser(state) {
console.log(state)
state = Object.keys(state).map((item) => { state[item] = '' })
}
}
}
module.exports = user
在user模块中,因为模块化后避免不同的模块相互冲突,得加上 namespaced: true
开启命名空间,开启命名空间后你的模块将会已它的文件名来命名,下面会介绍模块化后怎么使用。
自动引入及状态持久化
//index.js
import Vue from "vue"
import Vuex from "vuex"
import createPersistedState from "vuex-persistedstate"
Vue.use(Vuex)
const initModules = () => {
// 获取所有vuex模块
const requireModules = require.context(
"./modules",
true,
/\.js$/
)
// 获取store文件夹内所有module模块并引入
const modulesArr = requireModules.keys().map((item) => {
return {
name: item.replace("./", "").replace(".js", ""),
module: requireModules(item),
}
})
const modules = {}
modulesArr.map((item) => {
modules[item.name] = item.module
})
return modules
}
export default new Vuex.Store({
state: {
data: []
},
mutations: {},
actions: {},
modules: { ...initModules() },
plugins: [
//vuex状态持久化
createPersistedState({
paths: ['user'],
//将path中选中的模块同时存储在localStroage中
storage: window.localStorage,
}),
],
})
index.js 为入口文件,我们通过webpack的api动态获取modules文件夹内的所有js文件并生成数组,在index.js文件中统一使用
状态持久化使用了vuex-persistedstate这个插件,它可以将vuex的数据同步到sessionStroage或localStroage中,避免了刷新页面时导致的数据丢失,例如用户信息这些就可以非常方便的使用。
使用后效果如下图,stroge中会生成一个vuex数据,里面分模块放置着你需要状态持久化的数据
模块的使用
在模块化之后,你只需要根据你模块的名称来获取使用例如,调用方法的时候在方法前加上 模块名/
this.$store.state.user//获取用户模块数据
this.$store.commit('user/dltUser') //用于调用user模块内dltUser这个方法