vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vuex持久化存储vuex-persist

Vuex持久化存储之vuex-persist问题

作者:每逢佳节掉三根.

这篇文章主要介绍了Vuex持久化存储之vuex-persist问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

Vuex持久化存储之vuex-persist

Vuex 的状态存储并不能持久化。

也就是说当你存储在 Vuex 中的 store 里的数据,只要一刷新页面,数据就丢失了。

引入vuex-persist 插件,它就是为 Vuex 持久化存储而生的一个插件。

不需要你手动存取 storage ,而是直接将状态保存至 cookie 或者 localStorage 中。

具体用法

如下:

安装:

npm install --save vuex-persist
or
yarn add vuex-persist

引入:

import VuexPersistence from 'vuex-persist'

先创建一个对象并进行配置:

const vuexLocal = new VuexPersistence({
    storage: window.localStorage
})

引入进vuex插件:

const store = new Vuex.Store({
  state: { ... },
  mutations: { ... },
  actions: { ... },
  plugins: [vuexLocal.plugin]
}) 

通过以上设置,在图3中各个页面之间跳转,如果刷新某个视图,数据并不会丢失,依然存在,并且不需要在每个 mutations 中手动存取 storage 。

vuex-persist 的详细属性

属性类型描述
keystring将状态存储在存储中的键。默认: 'vuex'
storageStorage (Web API)可传localStorage, sessionStorage, localforage 或者你自定义的存储对象. 接口必须要有get和set. 默认是: window.localStorage
saveStatefunction (key, state[, storage])如果不使用存储,这个自定义函数将保存状态保存为持久性。
restoreStatefunction (key[, storage]) => state如果不使用存储,这个自定义函数处理从存储中检索状态
reducerfunction (state) => object将状态减少到只需要保存的值。默认情况下,保存整个状态。
filterfunction (mutation) => boolean突变筛选。看mutation.type并返回true,只有那些你想坚持写被触发。所有突变的默认返回值为true。
modulesstring[]要持久化的模块列表。

Vuex持久化插件 Vuex-persist~~简单粗暴

我们知道vuex也有?些弊端,?如浏览器刷新的时候,vuex的数据会丢失,我们一般结合本地存储来解决,这个时候就可以使用 vuex-persist 持久化插件,不需要手动存取 storage ,而是直接将状态保存至 cookie 或者 localStorage 中

第一步

使用命令行 安装一下命令

npm i vuex-persist -S

第二部

引入到vuex  

store/index.js

import VuexPersistence from "vuex-persist"

第三步

在store/index.js使用plugins

const vuexLocal = new VuexPersistence({
  storage: window.localStorage  //这里可以改变存储方式,默认是localStorage
})
export default new Vuex.Store({
  state: { ... },
  mutations: { ... },
  actions: { ... },
  plugins: [vuexLocal.plugin]
})

这个时候就能够解决,刷因页面数据丢失的问题~~~~

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文