vscode使用vuex数据持久化插件(vuex-persistedstate)

因为Vue是单页面应用，页面跳转是vue-router实现的类似页面跳转的效果（切换对应的组件以展示不同的页面），刷新页面会让整个页面数据回到初始状态，即：vuex.state中的数据还原到初始值

一、刷新页面，vuex数据未持久化

项目结构：

store/index.js

import Vue from "vue";
import Vuex from "vuex";
import state from './state.js'
import mutations from "./mutations.js";

Vue.use(Vuex);

export default new Vuex.Store({
  state,
  mutations,
  actions: {},
  modules: {},
});

store/mutations.js

const mutations={
    setName(state,newName){
        state.name=newName;
    }
}
export default mutations;

store/state.js

const state={
    name:'zs',
    age:18
}
export default state;

App.vue

import { mapState, mapMutations } from "vuex";

export default {
  computed: {
    ...mapState(['name','age']),
  },
  mounted() {
    console.log("vuex state:", this.name,this.age);
  },
  methods: {
    ...mapMutations(["setName"]),
    changeName() {
      console.log("changed name");
      this.setName("法外狂徒");
      console.log('vuex state:',this.name,this.age);
    },
  }
};

演示：

可以看到，刷新后，vuex.state中的数据回到了初始值

二、刷新页面，vuex数据已持久化

1.数据存储在localStorage

下面使用 vuex-persistedstate 插件持久化数据
安装插件:

npm install vuex-persistedstate --save

使用插件：

//store/index.js
import Vue from "vue";
import Vuex from "vuex";
import state from './state.js'
import mutations from "./mutations.js";
import createPersistedState from "vuex-persistedstate";//数据持久化插件

Vue.use(Vuex);

export default new Vuex.Store({
  state,
  mutations,
  actions: {},
  modules: {},
  plugins:[createPersistedState()]//使用数据持久化插件
});

演示：

可以看到，在刷新后，vuex.state数据也没有回到初始值，因为值已经被 vuex-persistedstate 插件存储在localStorage中

原理也很简单：

//设置初始值
age:localStorage.getItem('age')?JSON.parse(localStorage.getItem('age')):18
//修改state
localStorage.setItem(JSON.stringify(this.age))

2.数据存储在sessionStorage

修改一下该插件的数据项storage存储方式为sessionStorage

plugins:[createPersistedState({
    storage:window.sessionStorage
  })]//使用数据持久化插件

演示：