vuex数据持久化实现有什么方法?
Admin 2021-09-13 群英技术资�
vuex数据持久化实现有什么方法?对于vue数据持久化的问题,下面小编通过实例来给大家分享一下实现方法,有vuex-persistedstate和vuex-persist这两种方法,下面我们来详细了解一下�
在基于vue开发SPA项目时,为了解决页面刷新后数据丢失的问题,我们一般都是将数据存储在localstorage或sessionstorage中;当数据需要全局处理统一管理时,我们也会借助于vue官方提供的vuex来进行数据的统一管理。vuex相比localstorage或sessionstorage来说,存储数据更安全些。与此同时,vuex也存在一些弊端,当页面刷新后,vuex中state存储的数据同时也会被更新,vuex中存储的数据不能持久化,需要监听处理来维持vuex存储的数据状态持久化�
为解决页面刷新后vuex中存储的数据状态不能持久化的问题,我采取的是借助第三方插件工具来实现vuex数据的持久化存储,来解决页面刷新后数据更新的问题�
安装插件
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] });
注意事项�
安装插件
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数据持久化的介绍了,对于上述两种,大家根据实际情况选择合适的自己的就可以,希望本文对大家有帮助,想要了解更多大家可以继续浏览群英网络其他相关的文章�
文本转载自脚本之�
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容�
猜你喜欢
Angular如何进行视图封装?下面本篇文章给大家深入了解一下Angular Encapsulation的三种方式,希望对大家有所帮助�
今天给大家分享的是jquery操作table的内容,本文主要给大家介绍实现动态增加和删除行的功能,实现效果及代码如下,感兴趣的朋友接下来跟随小编一起看看吧�
这篇文章主要为大家详细介绍了用vue实现注册页,短信验证码登录,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一�
判断方法�1、用“输入控件对�.value”语句获取用户输入的数据�2、用“var re = /^[0-9]+.?[0-9]*/;”语句定义正则表达式对象�3、用“re.test(输入数据)”语句通过正则表达式判断输入数据是否为数值类型�
这篇文章主要为大家详细介绍了JavaScript点击按钮生成4位随机验证码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一�
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所�
增值电信经营许可证 : B1.B2-20140078