前言
最近将后台框架的vue版本从2.x升级为3.x版本,期间也遇到了很多坑,下面讲一下vue3.x实现实现全局数据模块化+持久化和vue2.x的区别
下文全部都是默认vue3.x + vite
的环境,官方讲过的东西将不再赘述,想看2.x版本可以点击下面链接进入
vuex模块的自动化引入及持久化实现
根据vuex官网所述,引入vuex,在项目根文件夹新建如下结构文件夹
vuex4.x版本官方文档
在index.js
中写入如下代码
// store/index.js
import { createStore } from "vuex"
import createPersistedState from "vuex-persistedstate"
// 创建一个新的 store 实例
const initModule = () => {
// 获取modules文件夹内所有的模块
const requireModules = import.meta.globEager("./modules/*.js")
const modules = {}
for (let i in requireModules) {
// 将模块路径切割出模块名
const moduleName = i
.split("/")
[i.split("/").length - 1].replace(".js", "")
// 将模块放入modules
modules[moduleName] = requireModules[i].default
}
return modules
}
const store = createStore({
state() {
},
mutations: {
},
modules: { ...initModule() },
plugins: [
createPersistedState(),
],
})
export default store
状态持久化使用了vuex-persistedstate这个插件,它可以将vuex的数据同步到sessionStroage或localStroage中,避免了刷新页面时导致的数据丢失,例如用户信息这些就可以非常方便的使用。
每个模块中的代码如下(示例代码)
// store/module/router.js
export default {
namespaced: true,
state: {
route: [],
},
mutations: {
changeActive(state, active) {
state.active = active
},
},
}
模块的使用
在模块化之后,你只需要根据你模块的名称来获取使用例如,调用方法的时候在方法前加上 模块名/
this.$store.state.router//获取用户模块数据
this.$store.commit('router/changeActive') //用于调用router模块内changeActive这个方法
这样我们就实现了vue3.x版本的全局数据模块化+持久化
注意点
自动引入模块时由于打包工具的不同,需要修改获取,模块的方式,下面放一下不同点
// webpack引入模块
const requireModules = require.context("./modules",true, /\.js$/)
// vite引入模块
const requireModules = import.meta.globEager("./modules/*.js")