龙空技术网

Vuex 刷新页面后数据就消失了,怎么保存数据持久化?

小焱2018 411

前言:

而今咱们对“vuex怎么取数据”都比较关心,看官们都想要学习一些“vuex怎么取数据”的相关内容。那么小编在网上收集了一些有关“vuex怎么取数据””的相关知识,希望咱们能喜欢,朋友们快快来了解一下吧!

1 .如果想让某些数据页面刷新之后不消失,那就可以结合本地存储做到数据持久化

2 .比如之前的搜索记录,还有一些需要依赖的数据。比如本次活动的代号存下来,让我在一段时间内,根据这个编号来确定相关代号代表的一批数据可以缓存在本地,一遍在下一次请求的时候快速返回

3 .实现原理:在mutations定义的方法里对vuex的状态操作的同时对存储也做相应的操作

4 .插件vue-savedata,vuex-persistedstate

5 .实际实现:监听浏览器的刷新,刷新之前把vuex存在本地,在路由拦截处获取本地储存,放进vuex并删除本地存储,可以自由控制存localstorage和sessionStorage,完全避免插件来消耗性能。

6 .不同页面之间的数据传值,vuex适合组件间传值。

7 .有的问题研究一分钟和一个小时,是会发现不同的问题。

区别

1 .vuex存储在内存。localstorage则以文件的方式存储在本地

2 .应用场景:vuex用于组件之间的传值,localstorage则用于不同页面之间的传值

3 .永久性:当刷新页面时vuex存储的值会丢失。localStorage不会删除

4 .localstorage:只能进行简单的数据读写,对不同组件之间读取数据并做数据转化时,需要对每个读写操作都写一遍代码,重点是存放

5 .vuex是状态管理,重点是管理数据,一个是数据容器,一个是数据管理器。

vue-savedata 持久化createPersiste([options])

下列选项(默认保存store中的每个数据到本地 )

(温馨提示: LS即Localstorage本地存储, SS即sessionStorage本地存储, LS、SS可同时使用,也可单独使用 )

可以为您的特定需求配置插件: (参数都是可选的:有默认值)

saveName <String>: 本地save的key 默认: savedataciphertext <Boolean>: 是不是密文存本地(base64) 默认 falsemode <String>: 默认存储模式(LS,SS配置不存在时有效) 默认: LSMMD <Number>: 模块 深度合并, 深度值 默认:2(如果出现数据丢失可以尝试把这个开高一点)SS <Object> || <Array>: { storePath: xx, module: xx } 注:storePath:(和Vuex中的option.modules:{key:value}的key,一,一对应)SL <Object> || <Array>: { storePath: xx, module: xx } 同上, 支持多个模块,传入数组

import createPersiste from 'vue-savedata'import module1 from './modules/module1'import module2 from './modules/module2'const persiste = createPersiste({    ciphertext: true, // 加密存本地, 默认为false    LS: {        module: module1,        storePath: 'module100' // __storePath:(和Vuex中的option.modules:{key:value}的key,一,一对应)__    },    SS: {        module: module2,        storePath: 'module2'     }})/** *  * 数组 支持传入多个模块,相应,__storePath:和Vuex中的option.modules:{key:value}的key,一一对应__ * const persiste = createPersiste({    LS:[{        module: module1,        storePath: 'module100'     },...],    SS: [{        module: module2,        storePath: 'module2'     },...]}) ***/const store = new Vuex.Store({  	// ...    modules: {        module100: module1,        module2    },    plugins: [persiste],})
vuex-persistedstate 保存数据持久化

1.store/index.js

import Vue from "vue";import Vuex from "vuex";import modules from "./modules";import getters from "./getters";import createPersistedState from "vuex-persistedstate";Vue.use(Vuex);const createPersisted = createPersistedState({    storage: window.sessionStorage,    key: 'CHEN',    reducer (val) {        return {            // 只储存state中的某些字段 注意:键值对名字要一致            // tagsView: val.tagsView,            // user: val.user            home: val.home        };    }});const store = new Vuex.Store({    modules: {...modules},    getters,    plugins: [createPersisted]});export default store;

标签: #vuex怎么取数据 #vue返回上一页保留数据