vuex数据持久化的实现方法有哪些

本篇内容介绍了“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";Vue.use(Vuex);const state = {};const mutations = {};const actions = {};const store = new Vuex.Store({state,mutations,actions,  plugins: [createPersistedState({      // 存储方式：localStorage、sessionStorage、cookiesstorage: 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]});

注意事项：

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;

属性方法

总结

上述两种方案都可以实现vuex数据持久化存储。方案一是我在实际开发过程中用到的，方案二是在GitHub上看到的，综合来说，两者都可以时间最终的需求，而且都有对应的案例Demo可以参考。相比来说方案一在gitHub上的start数要高于方案二。

请结合实际情况选择符合自己的方案！

“vuex数据持久化的实现方法有哪些”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！