2019-01-10 vuex-persist 持久化设置

安装:

npm install --save vuex-persist

or

yarn add vuex-persist

引入:

importVuexPersistencefrom'vuex-persist'

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

constvuexLocal =newVuexPersistence({storage:window.localStorage})

引入进vuex插件:

conststore =newVuex.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[]要持久化的模块列表。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 不联系,是因为你的冷淡告诉我 打扰到你了;不主动,是因为根本打动不了你。虽然我有一万种想见你的理由,却少了一种能见...
    鱼非鱼也阅读 1,715评论 0 0
  • 1 周河村小学二年级,自然课老师正在讲课。 老师说,太阳比地球大,地球有上百万个村子那么大,人类对太阳来说,就像一...
    4482de10b419阅读 3,339评论 1 6

友情链接更多精彩内容