vuex持久化存储（vuex-persist）

在开发的过程中， vuex数据刷新页面会初始化。像用户信息（名字，头像，token）需要vuex中存储且需要浏览器本地存储来实现持久化存储。

1. 安装

npm install vuex-persistedstate --save
或
npm install vuex-vuex-persist--save

2.引入

在store目录下的index.js

import VuexPersistence from 'vuex-persist'
或
import VuexPersistence from 'vuex-persistedstate '

2.1

在index.js下加下面代码就ok！如果不需要配置的话，到这就可以了

 plugins: [createPersistedState()]

3. 配置

import VuexPersistence from 'vuex-persist'
const vuexLocal = new VuexPersistence({
  key: 'Vuex-Persistence',
  storage: window.sessionStorage,
  reducer: state => {
    console.log('VuexPersistence:state', state)
    return {
      token: state.token
    }
  }
})

export default new Vuex.Store({
  state: {
    token: '',
    auth: false
  },
  mutations: {
    setToken(state, token) {
      state.token = token
    },
    setAuth(state, auth) {
      state.auth = auth
    }
  },
  plugins: [vuexLocal.plugin],
})

3. 状态持久化

import Vue from 'vue'
import Vuex from 'vuex'
import VuexPersistence from 'vuex-persist'
import menuModule from './menu'
Vue.use(Vuex)

const vuexLocal = new VuexPersistence({
  key: 'Vuex-Persistence',
  storage: window.sessionStorage,
  modules: ['menu'],
  reducer: state => {
    console.log('VuexPersistence:state', state)
    return {
      // 状态持久化
      token: state.token,
      // 模块持久化
      menu: state.menu
      // auth不做持久化
      // auth: false
    }
  }
})

export default new Vuex.Store({
  state: {
    // 配置了持久化
    token: '',
    // 没有配置持久化
    auth: false
  },
  mutations: {
    setToken(state, token) {
      state.token = token
    },
    setAuth(state, auth) {
      state.auth = auth
    }
  },
  actions: {},
  plugins: [vuexLocal.plugin],
  modules: {
     menu: menuModule
  }
})
 

4. 注意事项

1.引入modules配置后，无需使用命名空间取state
2.filter过滤mutation时，初次可以过滤，再次依然持久化