vuex数据持久化

vuex结合localStorage实现状态持久化

1 . 安装

npm install vuex-persistedstate

2 . 在store.js里

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

可以看到，引用的时候有一个storage: window.sessionStorage，说明会把数据存储到localStorage中

可配置项

key： storage名称，所有的数据会存储到一个key里面，默认：vuex
storage： 数据存储位置，默认：localStorage

3 . 组件中获取
vuex里面存放的数据，页面一经刷新会丢失：
解决办法： 存放在localStorage或者sessionStorage里面，进入页面时判断是否丢失，丢失再去localStorage或者sessionStorage里面取；
在app.vue根组件的created里面判断是否丢失，在进行上面的操作；

 created(){

      if(localStorage.vuex){
          this.list=JSON.parse(localStorage.vuex)
      }

  },

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

一个很好的例子就是购物车：如果用户不小心关闭了一个标签，他们可以重新打开并回到之前页面的状态。