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.defaultreturn 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.defaultreturn 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.defaultreturn 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插件实现，配置基本相同，具体点击查看文档

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

织梦TXT批量导入TAG标签并自动匹配相关文章插件
织梦TXT批量导入TAG标签并自动匹配相关文章插件是一种非常有用的插件,它可以帮助网站管理员快速地将TAG标签添加到文章中,并自动匹配相关文章. 以下是该织梦TXT批量导入TAG标签插件的几个优点: ...
html分页自动加载,AutoPagerize插件，网页自动翻页插件，自动加载分页网站
AutoPagerize,是一款可以实现网页自动翻页的浏览器插件,该插件会自动缓存下一页网页,将翻页式的内容变为瀑布流的形式,无需手动点击翻页,即可自动链接到下一页. 用于自动加载分页网页的浏览器扩展 ...
探探自动配对PHP_探探自动匹配工具app下载-探探自动匹配工具(好友匹配)app安卓版v1.0-电玩之家...
探探自动匹配工具是一款自动匹配添加好友的应用软件,探探自动匹配工具支持定时刷新好友功能,支持搜索匹配符合的用户,自动添加好友.对于有这个需要的用户来说是款不错的软件.探探自动匹配工具功能强大.操作简单 ...
模糊搜索下拉框（可输入+自动匹配）
模糊搜索下拉框(可输入+自动匹配) 实现可输入+带自动匹配功能的下拉框,我试过以下几种方法: 1.直接使用h5的新标签,对应demo如下: <input list="browsers& ...
EXCEL中数据的自动匹配主要包含的内容
EXCEL中数据的自动匹配主要包含的内容: EXCEL中无法直接使用SELECT语句进行数据查询.定位.匹配,必须依赖其自身提供的函数.本文将介绍三种EXCEL中的数据自动匹配方法,使单元格内容能够自 ...
ai不同形状的拼版插件_Illustrator（AI）自动拼版脚本插件
Illustrator(AI)自动拼版脚本插件书法字体2018.04.15ai脚本分享一款小巧的Illustrator(AI)自动拼版脚本插件.此自动拼版脚本适用于相同形状的ai文档阵列方式拼版. ...
查漏补缺方为上策！！两万六字总结vue的基本使用和高级特性，周边插件vuex和vue-router任你挑选
vue的基本使用和高级特性,周边插件vuex和vue-router 一.vue的使用 1.vue-cli 2.基本使用 (1)模板(插值,指令) (2)computed和watch (3)class和 ...
vuex 源码分析_深入Vuex原理（上）
原标题:深入Vuex原理(上) 孔维国,2016年加入去哪儿网技术团队.目前在大住宿事业部/增值业务研发中心,参与开发了TMC.CRM.QTA.Auth等项目,负责node框架nomi的设计以及开发. ...
vuex的计算属性_vue中vuex的五个属性和基本用法
VueX 是一个专门为 Vue.js 应用设计的状态管理构架,统一管理和维护各个vue组件的可变化状态(你可以理解成 vue 组件里的某些 data ). Vuex有五个核心概念: state, ge ...

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

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

最新文章

热门文章