vuex数据持久化的两种实现方案

2024-09-27 07:27:15

业务需求：

在基于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]
});

注意事项：

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数据持久化内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

详解vuex持久化插件解决浏览器刷新数据消失问题

众所周知,vuex的一个全局状态管理的插件,但是在浏览器刷新的时候,内存中的state会释放,通常的解决办法就是用本地存储的方式保存数据,然后再vuex初始化的时候再赋值给state,手动存再手动取会觉得很麻烦,这个时候就可以使用vuex的插件vuex-solidification 插件地址: vuex-solidification, 欢迎star 插件原理 vuex有一个hook方法:store.subscribe((mutation, state) => {}) 每次在mutation方法执
Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题

页面刷新后,想保存页面未保存的数据.我们总是习惯于放在浏览器的sessionStorage和localStorage中.但是用了vue后,vuex便可以被应用了. vuex优势:相比sessionStorage,存储数据更安全,sessionStorage可以在控制台被看到. vuex劣势:在F5刷新页面后,vuex会重新更新state,所以,存储的数据会丢失. vuex可以进行全局的状态管理,但刷新后刷新后数据会消失,这是我们不愿意看到的.怎么解决呢,我们可以结合本地存储做到数据持久化,也可以
VUEX 数据持久化,刷新后重新获取的例子

VUEX 数据持久化 // store.js getters: { userInfo(state) { console.log('getters',state); if (!state.userInfo.id) { let token = getStorage("token"); console.log('token',token); if (token) { let userInfo = getStorage("userInfo"); state.userInfo
Vuex数据持久化实现的思路与代码

什么是vuex vuex :是一个专为vue.js开发的状态管理器,采用集中式存储的所有组件状态五个属性: state.getters.mutations.actions.module 基本使用: 新建store.js文件,最后在main.js中引入,并挂载到实列上 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const state = {} const getters = {} const mutations = {
vuex实现数据状态持久化

用过vuex的肯定会有这样一个痛点,就是刷新以后vuex里面存储的state就会被浏览器释放掉,因为我们的state都是存储在内存中的. 所以我们通过 vuex-persistedstate这个插件,来实现将数据存储到本地用法很简单 1. npm install vuex-persistedstate 2. import createPersistedState from 'vuex-persistedstate' const store = new Vuex.Store({ modules:
vuex数据持久化的两种实现方案

目录业务需求: 方案一:vuex-persistedstate 方案二:vuex-persist 总结业务需求: 在基于vue开发SPA项目时,为了解决页面刷新后数据丢失的问题,我们一般都是将数据存储在localstorage或sessionstorage中:当数据需要全局处理统一管理时,我们也会借助于vue官方提供的vuex来进行数据的统一管理.vuex相比localstorage或sessionstorage来说,存储数据更安全些.与此同时,vuex也存在一些弊端,当页面刷新后,vuex
javascript 实现纯前端将数据导出excel两种方式

目录前言方法一方法二前言修改之前项目代码的时候,发现前人导出excel是用纯javascript实现的.并没有调用后台接口. 之前从来没这么用过,记录一下.以备不时之需. 方法一将table标签,包括tr.td等对json数据进行拼接,将table输出到表格上实现,这种方法的弊端在于输出的是伪excel,虽说生成xls为后缀的文件,但文件形式上还是html, 代码如下: <html> <head> <p style="font-size: 20p
Android实现listview动态加载数据分页的两种方法

在android开发中,经常需要使用数据分页,比如要实现一个新闻列表的显示,或者博文列表的显示,不可能第一次加载就展示出全部,这就需要使用分页的方法来加载数据,在android中Handler经常用来在耗时的工作中,它接收子线程发送的数据,并使用数据配合更新UI,AsyncTask是在一个线程中执行耗时操作然后把结果传给UI线程,不需要你亲自去管理线程和句柄. 一.使用Handler+线程方法 1.基础知识 Handler在android系统中,主要负责发送和接收消息,它的用途主要有以下两种:
解析Android截取手机屏幕两种实现方案

最近在开发的过程中,遇到了一个需要截取屏幕保存为图片的需求,具体为截取webview的视图保存图片. 方法1:首先想到的思路是利用SDK提供的View.getDrawingCache()方法: public void printScreen(View view) { String imgPath = "/sdcard/test.png"; view.setDrawingCacheEnabled(true); view.buildDrawingCache(); Bitmap bitmap
Struts2中validate数据校验的两种方法详解附Struts2常用校验器

1.Action中的validate()方法 Struts2提供了一个Validateable接口,这个接口中只存在validate()方法,实现这个接口的类可直接被Struts2调用,ActionSupport类就实现了Vadidateable接口,但他的validate()方法是一个空方法,需要我们来重写. validate()方法会在execute()方法执行前执行,仅当数据校验正确,才执行execute()方法, 如错误则将错误添加到fieldErrors域中,如果定义的Action中
浅谈vue项目用到的mock数据接口的两种方式

1.使用devServer.before进行数据mock //通过配置devServer.before选项,设置url访问路径及response响应数据,进行mock数据. const { data } = require('./data.json') // 引入json数据对象 //vue.config.js配置文件中进行Vue CLI的配置 module.exports = { //... devServer: { before: function(app, server) { app.ge
mysql清空表数据的两种方式和区别解析

在MySQL中删除数据有两种方式: truncate(截短)属于粗暴型的清空 delete属于精细化的删除删除操作如果你需要清空表里的所有数据,下面两种均可: delete from tablename; truncate table tablename; 而如果你只是删除一部分数据,就只能使用delete: delete from tablename where case1 and case2; 区别在精细化的删除部分数据时,只能使用delete. 而清空所有表数据时,两者均可,此时这两
vuex 第三方包实现数据持久化的方法

目的: 让在vuex中管理的状态数据同时存储在本地.可免去自己存储的环节. 在开发的过程中,像用户信息(名字,头像,token)需要vuex中存储且需要本地存储. 如果有别的模块也需要持久化,也存储在本地 1)首先:我们需要安装一个vuex的插件vuex-persistedstate来支持vuex的状态持久化. npm i vuex-persistedstate 2)然后:在src/store 文件夹下新建 modules 文件,在 modules 下新建 user.js 和 cart.js

vuex数据持久化的两种实现方案

目录

业务需求：

方案一：vuex-persistedstate

方案二：vuex-persist

总结

相关推荐

随机推荐