Vuex的数据状态持久化工具vuex-persistedstate

vuex的可以进行全局的数据管理,但是一刷新就清空了,这很不友好,当然我们可以把vuex的数据状态存储在本地,但每次操作又很麻烦,所以强烈推荐大家使用插件vuex-persistedstate

安装

npm install vuex-persistedstate --save

vuex-persistedstate默认是将数据存储在localStorage的

• 在store/index.js中

  import Vue from 'vue';
  import Vuex from 'vuex';
  import persistedState from 'vuex-persistedstate';
  Vue.use(Vuex);
  export default new Vuex.Store({
    plugins: [persistedState()],
    state: {},
    mutations: {},
    actions: {},
  });

使用vuex-persistedstate存储到sessionStorage

• 在store/index.js中

  import Vue from 'vue';
  import Vuex from 'vuex';
  import persistedState from "vuex-persistedstate"
  Vue.use(Vuex);
  const store = newVuex.Store({
     plugins: [persistedState({
         storage:window.sessionStorage
     })],
     state: {},
     mutations: {},
     actions: {},
  })