Vuex的模块化自动引入及状态持久化实现

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这个方法