vuex数据持久化的两种实现⽅案
⽬录
业务需求：
⽅案⼀：vuex-persistedstate
⽅案⼆：vuex-persist
总结
业务需求：
在基于vue开发SPA项⽬时，为了解决页⾯刷新后数据丢失的问题，我们⼀般都是将数据存储在localstorage或sessionstorage 中；当数据需要全局处理统⼀管理时，我们也会借助于vue官⽅提供的vuex来进⾏数据的统⼀管理。vuex相⽐localstorage或sessionstorage来说，存储数据更安全些。与此同时，vuex也存在⼀些弊端，当页⾯刷新后，vuex中state存储的数据同时也会被更新，vuex中存储的数据不能持久化，需要监听处理来维持vuex存储的数据状态持久化。
为解决页⾯刷新后vuex中存储的数据状态不能持久化的问题，我采取的⽅案是借助第三⽅插件⼯具来实现vuex数据的持久化存储，来解决页⾯刷新后数据更新的问题。
⽅案⼀：vuex-persistedstate
安装插件
yarn add vuex-persistedstate
// 或
npm install --save vuex-persistedstate
使⽤⽅法
import Vuex from "vuex";
// 引⼊插件
import createPersistedState from "vuex-persistedstate";sessionstorage和localstorage
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中所有的数据
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对象。
⽅案⼆：vuex-persist
安装插件
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,
If not using storage, this custom function handles saving state to persistence
state[, 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 it self(state.x === state)Default: false 属性值
数据类型描述总结
上述两种⽅案都可以实现vuex 数据持久化存储。⽅案⼀是我在实际开发过程中⽤到的，⽅案⼆是在Gith
ub 上看到的，综合来说，两者都可以时间最终的需求，⽽且都有对应的案例Demo 可以参考。相⽐来说⽅案⼀在GitHub 上的start 数要⾼于⽅案⼆。请结合实际情况选择符合⾃⼰的⽅案！
到此这篇关于vuex 数据持久化的两种实现⽅案的⽂章就介绍到这了，更多相关vuex 数据持久化内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！

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