Vuex + vuex-persistedstate 数据持久化

会不会遇到过在使用Vuex保存数据时，浏览器一刷新数据就被重置了？
接下来教你一招解决Vuex数据持久化，让你可以放心刷新。

1. 安装Vuex

npm install vuex --save

2. 安装vuex-persistedstate

npm install vuex-persistedstate --save

3. 在src下新建一个store文件夹，在里面新建一个js文件

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import persistedState from 'vuex-persistedstate'
Vue.use(Vuex);

const store = new Vuex.Store({
  //引用vuex-persistedstate对state数据持久化
  plugins: [
    persistedState({ storage: window.sessionStorage })
  ],

  // this.$store.state.***
  state: {
    key1: 'value1',
    key2: 'value2',

  },

  mutations: {
    //删除state this.$store.commit('remover', 'key1');
    remover (state, key) {
      state[key] = '';
    },

    //更新state this.$store.commit('upDate', {key1: 'value3'});
    upDate (state, obj) {
      let key = Object.keys(obj)[0];
      state[key] = obj[key];
    },

    //添加state信息
      addUserInfo (state, obj){
          state.userInfo = obj;
      },
  },

});

export default store

官方不建议直接使用 == 对state就行操作

删除state
this.$store.commit('remover', 'key1');

更新state
this.$store.commit('upDate', {key1: 'value3'});

4. 在main.js里引入store

import Vue from 'vue'
import router from './router'
import App from './App'
import store from './store'; //引入store

Vue.config.productionTip = false;

new Vue({
  el: '#app',
  router,
  store, //声明挂载store
  components: { App },
  template: '<App/>'
})

---

• 这样当你再刷新浏览器后数据就不会被重置了。
• 原理就是它在sessionStorage保存了一份vuex关联数据，在我们用commit对state里的数据操作时sessionStorage里的数据也会相应改变，刷新时再从sessionStorage里取出数据。
• 如果你不想把数据存在sessionStorage里的话可以把store里的js文件的window.sessionStorage改成别的

  plugins: [
    persistedState({ storage: window.sessionStorage })
  ],