业务需求：
在基于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";
Vue.use(Vuex);
const state = {};
const mutations = {};
const actions = {};
const store = new Vuex.Store({
state,
mutations,
actions,
plugins: [
createPersistedState({
// 存储方式：localStorage、sessionStorage、cookies
storage: window.sessionStorage,
// 存储的 key 的key值
key: "store",
render(state) {
// 要存储的数据：本项目采用es6扩展运算符的方式存储了state中所有的数据
return { ...state };
}
})
]
});
export default store;
vuex中module数据的持久化存储
export const dataStore = {
state: {
data: []
}
}
import { dataStore } from './module'
const dataState = createPersistedState({
paths: ['data']
});
export new Vuex.Store({
modules: {
dataStore
},
plugins: [dataState]
});
注意事项：
- storage为存储方式，可选值为localStorage、sessionStorage和cookies；
- localStorage和sessionStorage两种存储方式可以采用上述代码中的写法，若想采用cookies坐位数据存储方式，则需要另外一种写法；
- render接收一个函数，返回值为一个对象；返回的对象中的键值对既是要持久化存储的数据；
- 若想持久化存储部分数据，请在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, state[, storage]) | If not using storage, this custom function handles saving state to persistence |
| 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 at mutation.type 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数据持久化存储。方案一是我在实际开发过程中用到的，方案二是在Github上看到的，综合来说，两者都可以时间最终的需求，而且都有对应的案例Demo可以参考。相比来说方案一在GitHub上的start数要高于方案二。
请结合实际情况选择符合自己的方案！
到此这篇关于vuex数据持久化的两种实现方案的文章就介绍到这了,更多相关vuex数据持久化内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
