[JavaScript知识库]vue3+vite+vuex实现全局数据模块化+持久化

前言

最近将后台框架的vue版本从2.x升级为3.x版本，期间也遇到了很多坑，下面讲一下vue3.x实现实现全局数据模块化+持久化和vue2.x的区别
下文全部都是默认vue3.x + vite的环境，官方讲过的东西将不再赘述，想看2.x版本可以点击下面链接进入

vue2.x+vuex实现全局数据模块化+持久化

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")