vuex数据持久化存储
业务需求：
在基于vue开发SPA项⽬时，为了解决页⾯刷新后数据丢失的问题，我们⼀般都是将数据存储在localstorage或sessionstorage中；当数据需要全局处理统⼀管理时，我们也会借助于vue官⽅提供的vuex来进⾏数据的统⼀管理。vuex相⽐localstorage或sessionstorage来说，存储数据更安全些。与此同时，vuex也存在⼀些弊端，当页⾯刷新后，vuex中state存储的数据同时也会被更新，vuex中存储的数据不能持久化，需要监听处理来维持vuex存储的数据状态持久化。
为解决页⾯刷新后vuex中存储的数据状态不能持久化的问题，我采取的⽅案是借助第三⽅插件⼯具来实现vuex数据的持久化存储，来解决页⾯刷新后数据更新的问题。
⽅案⼀：
安装插件
yarn add vuex-persistedstate
// 或
npm install --save vuex-persistedstate
使⽤⽅法
import Vuex from "vuex";
// 引⼊插件
import createPersistedState from "vuex-persistedstate";
Vue.use(Vuex);
const state = {};
const mutations = {};
const actions = {};
const store = new Vuex.Store({
state,
mutations,
actions,
/* vuex数据持久化配置 */
plugins: [
createPersistedState({
// 存储⽅式：localStorage、sessionStorage、cookies
storage: window.sessionStorage,
// 存储的 key 的key值
key: "store",
render(state) {
// 要存储的数据：本项⽬采⽤es6扩展运算符的⽅式存储了state中所有的数据
sessionstorage和localstorage
return { ...state };
}
})
]
});
export default store;
vuex中module数据的持久化存储
/* module.js */
export const dataStore = {
state: {
data: []
}
}
/* store.js */
import { dataStore } from './module'
const dataState = createPersistedState({
paths: ['data']
});
export new Vuex.Store({
modules: {
dataStore
},
plugins: [dataState]
});
注意事项：
1. storage为存储⽅式，可选值为localStorage、sessionStorage和cookies；
2. localStorage和sessionStorage两种存储⽅式可以采⽤上述代码中的写法，若想采⽤cookies坐位数据存储⽅式，则需要另外⼀种写
法；
3. render接收⼀个函数，返回值为⼀个对象；返回的对象中的键值对既是要持久化存储的数据；
4. 若想持久化存储部分数据，请在return的对象中采⽤key：value键值对的⽅式进⾏数据存储，render函数中的参数既为state对象。⽅案⼆：
安装插件
yarn add vuex-persist
// 或
npm install --save vuex-persist
使⽤⽅法
import Vuex from "vuex";
// 引⼊插件
import VuexPersistence from "vuex-persist";
Vue.use(Vuex);
//  初始化
const state = {
userName:'admin'
};
const mutations = {};
const actions = {};
// 创建实例
const vuexPersisted = new VuexPersistence({
storage: window.sessionStorage,
render:state=>({
userName:state.userName
// 或
...state
})
});
const store = new Vuex.Store({
state,
actions,
mutations,
// 数据持久化设置
plugins:[vuexPersisted.plugins]
});
export default store;
属性⽅法
属性值数据类型描述
key string The key to store the state in the storage Default: 'vuex'
storage Storage (Web API)localStorage, sessionStorage, localforage or your custom Storage object.Must implement getItem, setItem, clear etc.Default: window.localStorage
saveState function(key, state[,
storage])
If not using storage, this custom function handles saving state to persistence
restoreState function (key[,
storage]) => state
If not using storage, this custom function handles retrieving state from storage
reducer function (state) =>
object
State reducer. reduces state to only those values you want to save. By default, saves entire state
filter function (mutation)
=> boolean
Mutation filter. Look pe and return true for only those ones which you want a persistence
write to be triggered for. Default returns true for all mutations
modules string[]List of modules you want to persist. (Do not write your own reducer if you want to use this)
asyncStorage boolean Denotes if the store uses Promises (like localforage) or not (you must set this to true when suing something like localforage) Default: false
supportCircular boolean Denotes if the state has any circular references to itself (state.x === state) Default: false
总结
上述两种⽅案都可以实现vuex数据持久化存储。⽅案⼀是我在实际开发过程中⽤到的，⽅案⼆是在Github上看到的，综合来说，两者都可以时间最终的需求，⽽且都有对应的案例Demo可以参考。相⽐来说⽅案⼀在GitHub上的start数要⾼于⽅案⼆。
请结合实际情况选择符合⾃⼰的⽅案！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。