vueX 自动匹配modules，vueX插件vuex-persistedstate自动存储本地

本文已参与[新人创作礼]活动，一起开启掘金创作之路

vueX按模块写，需要手动引入模块，可以通过代码自动引入，方便快捷

代码：

// 自动匹配modules目录下的js文件作为store的modules，所以新增store模块的时候必须添加在modules目录下
const moduleFiles = require.context('./modules', true, /\.js$/);
const modules = moduleFiles.keys().reduce((modules, modulePath) => {
	const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
	const value = moduleFiles(modulePath)
	modules[moduleName] = value.default
	return modules
}, {});
 
const store = new vuex.Store({
	modules,
})

目录格式

vueX自动存本地

npm install vuex-persistedstate --save

import Vue from 'vue'
import Vuex from 'vuex'
import persistedState from "vuex-persistedstate";
import getters from './getters.js'
 
// 自动匹配modules目录下的js文件作为store的modules，所以新增store模块的时候必须添加在modules目录下
const moduleFiles = require.context('./modules', true, /\.js$/);
const modules = moduleFiles.keys().reduce((modules, modulePath) => {
	const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
	const value = moduleFiles(modulePath)
	modules[moduleName] = value.default
	return modules
}, {});
 
Vue.use(Vuex)
 
export default new Vuex.Store({
  getters,
  modules,
  plugins: [persistedState({
    key: "thisVueX", // 浏览器中的名字
    paths: ["user"] // 需要存储起来的参数模块
  })]
})

特殊处理(数据加解密)

// import CryptoJS from "crypto-js";
// const KEY1 = "cs2022606storage";
// const IVS1 = 'SpjSm53GXrBCK2XU'
// /**
//  * 
//  * 其他数据加密
//  */
//  export function DecryptAESOther(data) {
//   let dataData=JSON.parse(data)
//   let dataObject={}
//   if(dataData && dataData!=''){
//     Object.keys(dataData).forEach(item=>{
//       dataObject[item]=DecryptAESOther1(dataData[item])
//     })
//     return dataObject;
//   }else{
//     return {}
//   }
 
  
// }

// function DecryptAESOther1(data){
//   if (!data || data.length <= 0) return data;
//   var key = CryptoJS.enc.Utf8.parse(KEY1);
//   var iv = CryptoJS.enc.Utf8.parse(IVS1);
//   var decrypted = CryptoJS.AES.decrypt(data, key, {
//     iv: iv,
//     mode: CryptoJS.mode.CBC
//   });
//   // padding: CryptoJS.pad.Pkcs7
//   let returnData=decrypted.toString(CryptoJS.enc.Utf8).toString()
//   try{
//   	return JSON.parse(returnData);
//   }catch(e){
//   	//TODO handle the exception
// 	return returnData;
//   }
// }
// /**
//  * 
//  * 其他数据解密
//  */
//  export function EncryptAESOther(datas) {
//   let data = JSON.stringify(datas);
//   if (!data || data.length <= 0) return data;
//   var key = CryptoJS.enc.Utf8.parse(KEY1);
//   var iv = CryptoJS.enc.Utf8.parse(IVS1);
//   var encrypted = CryptoJS.AES.encrypt(data, key, {
//     iv: iv,
//     mode: CryptoJS.mode.CBC,
//     padding: CryptoJS.pad.Pkcs7
//   });
//   let jsonStr = encrypted.toString();
//   return jsonStr;
// }




//加解密方法
import {EncryptAESOther,DecryptAESOther} from '@/assets/utils/encrypt'

// 自动匹配modules目录下的js文件作为store的modules，所以新增store模块的时候必须添加在modules目录下
const moduleFiles = require.context('./modules', true, /\.js$/);
const modules = moduleFiles.keys().reduce((modules, modulePath) => {
	const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
	const value = moduleFiles(modulePath)
	modules[moduleName] = value.default
	return modules
}, {})


// 方法一：
export default new Vuex.Store({
  getters,
  modules,
  plugins: [persistedState({
    key: "vueX", // 浏览器中的名字
    // paths: ["user","public"], // 需要存储起来的参数模块，不能与reducer同时存在
    storage:{
      getItem:key=>DecryptAESOther(localStorage.getItem(key)),
      setItem: (key, value) => localStorage.setItem(key, value),
      removeItem: key => localStorage.removeItem(key)
    },
    reducer(value){
      return {
        user:EncryptAESOther(value.user),
        public:EncryptAESOther(value.public),
      }
    },
  })]

// 方法二：
export default new Vuex.Store({
  getters,
  modules,
  plugins: [persistedState({
    key: "vueX", // 浏览器中的名字
    // paths: ["user","public"], // 需要存储起来的参数模块，不能与reducer同时存在
    storage:{
      getItem:key=>DecryptAESOther1(localStorage.getItem(key)),
      setItem: (key, value) => localStorage.setItem(key, EncryptAESOther(value)),
      removeItem: key => localStorage.removeItem(key)
    }
  })]
})

createPersistedState([options])使用给定的选项创建插件的新实例。可以提供以下选项来配置您的特定需求的插件：

key ：存储持久状态的键。（默认：vuex）

paths ：部分持续状态的任何路径的数组。如果没有路径给出，完整的状态是持久的。（默认：[]）

reducer ：一个函数，将被调用来基于给定的路径持久化的状态。默认包含这些值。

subscriber ：一个被调用来设置突变订阅的函数。默认为store => handler => store.subscribe(handler)

storage ：而不是（或与）getState和setState。默认为localStorage。

getState ：将被调用以重新水化先前持久状态的函数。默认使用storage。

setState ：将被调用来保持给定状态的函数。默认使用storage。

filter ：将被调用来过滤将setState最终触发存储的任何突变的函数。默认为() => true

vuex-persistedstate
vuex-persistedstate(github)

最后：
也可以通过vuex-persist插件实现，配置基本相同，具体点击查看文档