vuex的持久化方案

1.本地持久化

1.引入localStorage或sessionStorage：

import Vue from 'vue';
Vue.prototype.$storage = window.localStorage; // 或者使用 sessionStorage

2.在Vuex的store中定义获取和设置本地存储数据的方法：

const store = new Vuex.Store({ state: { data: '' }, 
mutations: { SET_DATA(state, data) { state.data = data; 
Vue.prototype.$storage.setItem('data', JSON.stringify(data)); },
GET_DATA(state) { state.data = JSON.parse(Vue.prototype.$storage.getItem('data')); } } });

3.在组件中使用Vuex的数据时，调用GET_DATA方法获取本地存储中的数据，并在数据变化时调用SET_DATA方法保存数据：

created() { this.$store.commit('GET_DATA'); }, watch: { data: { handler(val) { 
this.$store.commit('SET_DATA', val); }, deep: true } }

二，插件持久化

1.引入组件

npm  i vuex-persistedstate -S

2.在vuex中使用

import createPersistedstate from 'vuex-persistedstate'

3.在vuex下方放入

 // plugins:[] vuex插件-持久化
  plugins: [
    createPersistedstate({
      key: 'data', // 存储vuex数据的任意键名-- 本地存储 localStorage
      paths: ['home', 'logins'] 
      // 存储的模块名称一级全局state数据  不写默认存储所有内容，最好写上去
    })
    // ...
  ]

清除储存 localStorage.removeItem('data')