1. 首页
  2. 前端

vue中实现Vuex状态持久化vuex-persistedstate

使用Vuex, 当保存在state状态下的数据,如果默认情况下,当改变了state中的数据,再刷新页面时,state中的数据状态会恢复到默认状态,显然在有些时候,这样是不合理的。所以,我们将vuex的状态抽取出来放到localStorage 中,这样就可以实现状态持久化,当数据改变后,再刷新浏览器,该值是不会还原到初始状态的,而vuex刚好提供了一个插件,可以很方便的是状态持久化。那就是vuex-persistedstate插件。

vuex-persistedstate 使用浏览器的本地存储( local storage )对状态( state )进行持久化。这意味着刷新页面或关闭标签页都不会删除你的数据。

使用方法:

1.要求:

2.安装

$ npm install vuex-persistedstate  --save

3.导入使用

在store.js页面里

import createPersistedState from 'vuex-persistedstate'
const store = new Vuex.Store({
  // 会自动保存创建的状态
  plugins: [createPersistedState()],
  state:{
   //...
  },
  mutations: {
   //...
  },
  actions: {
   //...
  }
})
export default store

到此结束,就实现了vuex数据持久化。

原创文章,作者:Ferrycoln,如若转载,请注明出处:https://ms200.cn/archives/512

发表评论

邮箱地址不会被公开。 必填项已用*标注

联系我们

在线咨询:点击这里给我发消息

邮件:499661635@qq.com.com

工作时间:周一至周五,9:30-18:30

QR code