温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

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

发布时间:2021-07-13 14:52:21 来源:亿速云 阅读:616 作者:chen 栏目:开发技术

本篇内容介绍了“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,
  /* 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;

属性方法

属性值数据类型描述
keystringThe key to store the state in the storage_Default: 'vuex'_
storageStorage (Web API)localStorage, sessionStorage, localforage or your custom Storage object.Must implement getItem, setItem, clear etc.Default: window.localStorage
saveStatefunction(key, state[, storage])If not using storage, this custom function handles saving state to persistence
reducerfunction(state) => objectState reducer. reduces state to only those values you want to save. By default, saves entire state
filterfunction(mutation) => booleanMutation 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
modulesstring[]List of modules you want to persist. (Do not write your own reducer if you want to use this)
asyncStoragebooleanDenotes if the store uses Promises (like localforage) or not (you must set this to true when suing something like localforage)Default: false
supportCircularbooleanDenotes if the state has any circular references to it self(state.x === state)Default: false

总结

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

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

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

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI