vuex-persistence数据持久化之自定义数据获取【白名单】

vuex-persistence数据持久化之自定义数据获取【白名单】

---

前景导读：

​ 在我们进行对vue脚手架建立的页面进行刷新时，会出现数据消失的情况，所以我们尝试引入了数据持久化Pluigns插件，但此时问题出现了，如果我们只是单纯的想把数据保存到本地，效果其实已经实现了，但是中间会产生性能上的负值，只要是通过仓库mutation或者action改变了的数据或让state里面的所有数据都存储到了localStorage中【这是默认的存储地址，可以自己改】

​ 所以现在我们提出了标题的想法

准备：

​ 自信的打开Github搜索 vuex-persistence 查看官方给我们的文档如下：

不难发现，类似于数组的reducer成功的引起了我的注意，一看还真是我想要的，所以迫不及待开始我的尝试

着手代码

// 原先最初是的代码
path:/store/moudle/index.js

// 设置状态
const state = {
  initData: '初始Vuex数据',
  testTemp:"123"
};
// 获取内容
const getters = {};
// 修改数据
const mutations = {
	changeState:state=>state.initData="loving"
};
// 异步操作
const actions = {
	 async getPosts({ commit }) {
	    const result = await this._vm.$u.api.getPosts();
	    console.log(result);
	  },
};

export default {
  namespaced: true, // 设置命名空间
  state,
  mutations,
  actions,
  getters,
};

//最原始的代码
path:/store/index.js

import Vue from 'vue';
import Vuex from 'vuex';
import indexModule from './modules/index';
import createPersistedState from "vuex-persistedstate";

Vue.use(Vuex);

export default new Vuex.Store({
	// 模块拆分
	modules: {
		indexModule,
	},
	plugins: [createPersistedState({
		key: "lovings-Do", //设置的localStorage的存储键值
		storage: { //设置的uni的本地存储
			getItem: (key) => uni.getStorageSync(key),
			setItem: (key, value) => uni.setStorageSync(key, value),
			removeItem: key => uni.removeStorageSync(key)
		},
	})],
});

原始代码实现效果

更改之后的代码

// /store/moudle/idnex.js 无需更改，只对仓库的index文件进行了改变

path:/store/index.js

import Vue from 'vue';
import Vuex from 'vuex';
import indexModule from './modules/index';
import createPersistedState from "vuex-persistedstate";

Vue.use(Vuex);

export default new Vuex.Store({
	// 模块拆分
	modules: {
		indexModule,
	},
	plugins: [createPersistedState({
		key: "lovings-Do", //设置的localStorage的存储键值
		storage: { //设置的uni的本地存储
			getItem: (key) => uni.getStorageSync(key),
			setItem: (key, value) => uni.setStorageSync(key, value),
			removeItem: key => uni.removeStorageSync(key)
		},
		// 此处才是我们的重中之重，idnexModule是我们的命名空间
		 reducer: (state) => ({
		 	indexModule: { 
				initData: state.indexModule.initData
 			}
		 })
	})],
});

查看更新之后的效果