vuex存取修改数据流程(vuex数据持久化的两种实现方案)
类别:编程学习 浏览量:2806
时间:2021-10-06 01:53:22 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, /* 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对象。
安装插件
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数据持久化内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- vue-cli请求数据的方式(vue-cli配置使用Vuex的全过程记录)
- vuex原理及使用方法(Vuex状态机的快速了解与实例应用)
- vuex存取修改数据流程(vuex数据持久化的两种实现方案)
- vue3.0零基础入门(快速掌握Vue3.0中如何上手Vuex状态管理)
- vue编程加入购物车(vuex实现简单的购物车功能)
- vue中的mapgetter优势(vuex 中辅助函数mapGetters的基本用法详解)
- vuex怎么使用数据(vuex的辅助函数该如何使用)
- vuex-table行列转换效果(vue3+el-table实现行列转换)
- vuex数据持续化(Vuex数据持久化实现的思路与代码)
- vuex中action的值怎么接(vuex中Getter的用法详解)
- 春节会放假几天(春节会放假吗)
- 小浴室,大民生 缙云3200多户困难群众洗上免费热水澡(小浴室大民生缙云3200多户困难群众洗上免费热水澡)
- 元旦闲谭(元旦闲谭)
- 息烽 这个村 治垃圾 有招 人人争当卫生模范(息烽这个村治垃圾)
- 今天要吃什么(今天要吃什么菜)
- 三杨之一 南杨 杨溥 安贞履节,酿醴调羹,宰相之气(三杨之一南杨杨溥)
热门推荐
- 宝塔面板进不去是什么原因(宝塔面板严重错误登录不上怎么办)
- python编辑redis(python使用pipeline批量读写redis的方法)
- laravel数据库查询(Laravel获取所有的数据库表及结构的方法)
- mysql的null值跟空值(你知道mysql中空值和null值的区别吗)
- php对称算法示例(php解决约瑟夫环算法实例分析)
- linux系统查看nginx系统版本(Linux中Nginx的防盗链和优化的实现代码)
- html的meta标签
- vue的路由模式有几种(Vue 路由返回恢复页面状态的操作方法)
- python3配置教程(python3中property使用方法详解)
- innodb和myisam(Mysql InnoDB和MyISAM区别原理解析)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9