【Abp VNext】实战入门（五）：【3】前端管理界面 vue-element-admin —— Vuex状态缓存 自动持久化本地存储

一、前言

前端开发经常需要用到采用 Vuex 来缓存当前会话信息，会话信息当页面刷新，浏览器关闭 信息就会丢失；

很多时候需要将当前会话缓存信息持久化存储到本地长久保存，可用通过localStorage手动操作：
localStorage.getItem(key),//获取本地存储
localStorage.setItem(key, value),//本地存储
localStorage.removeItem(key) //删除

如果有一种方法可以将 Vuex 的缓存信息自动持久化保存到本地，以及在浏览器刷新重新打开的时候，自动获取本地存储内容还原 Vuex 会话缓存信息 简直不要太舒服；

二、步骤

1、项目安装插件：npm install vuex-persistedstate --save
2、状态类展示：store/modules/userinfo.js

// 1、存放用户基础信息
const state = {
  Id: 0, // 用户编号  
  Name: \'\' // 姓名昵称
}

// 2、状态格式化访问输出
const getters = {}

// 3、存放更新状态数据相关的方法
const mutations = {
   SET_B_NAME(state, payload) {      
     state.bName = payload.name;
   }
   
  // 外部直接赋值后 通过提交内部状态更新方法 触发持久化插件保存数据;
  // 调用mutations 中的任何方法都会触发会话持久化保存，本方法用于其他地方跳过mutations 直接修改state值的时候，附加调用一次这个空方法达到触发效果
  //import Store from \'@/store/index\'
  //Store.state.UserInfo.Name=\"xxx\"
  //Store.commit(\'UserInfo/RefreshLocalStorage\')
  RefreshLocalStorage() {},
 }

// 4、异步请求数据 调用mutations同步更新状态
const actions = {
  // ASYNC_SET_NAME({ state, commit, rootState }, payload) {
  //   setTimeout(() => {
  //     state.bName = \'asyncName\'
  //   }, 4000)
  // }
}
export default {
  namespaced: true, // 必须要有
  state,
  getters,
  mutations,
  actions,
}

3、添加缓存本地化支持：store/index.js

import Vue from \'vue\'
import Vuex from \'vuex\'

// 用于配合状态管理将数据持久化到 LocalStorage 根目录执行：cnpm install vuex-persistedstate --save
import CreatePersistedState from \'vuex-persistedstate\'
import getters from \'./getters\'
import app from \'./modules/app\'
import settings from \'./modules/settings\'

import UserInfo from \'./modules/userinfo.js\'
Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    app,
    settings,
    TokenInfo,
    UserInfo
  },
  getters,

  //方法1:经测试可行 自动命名 前端只管通过对象进行取值 赋值 这里自动进行key value存储
  // plugins: [CreatePersistedState()] 
  
  //方法2：自定义
  plugins: [CreatePersistedState({
    // 持久化存储的关键字key 自定义即可
    key: \"Vuex_PersistentStorage\", 

    // [\'LoginInfo\',\'UserInfo\']要持久化的状态，在state里面取，如果有嵌套，可以  a.b.c
    paths: [\'UserInfo\', \'TenantInfo.TaskInfo\'],

    // 存储方式定义
    storage: {
      getItem: (key) => localStorage.getItem(key), // 获取
      setItem: (key, value) => localStorage.setItem(key, value), // 存储
      removeItem: (key) => localStorage.removeItem(key) // 删除
    }

  })]
})
export default store

4、触发持久化存储方法1：
调用状态类内部的 Mutations 方法 自动触发持久化存储
this.$store.dispatch(‘user/login’, this.loginForm)

5、触发持久化存储方法2：
个人觉得状态内部的 Mutations 及 Actions 方法好蠢 非人类 简单的事情复杂化，直接访问不香吗？

直接访问操作属性方便快捷但是不会触发 persistedstate 插件自动持久化
需要附加一条额外语句：Store.commit(‘UserInfo/RefreshLocalStorage’)

import Store from \'@/store/index\' 
Store.state.UserInfo.Name=\"xxx\"
//额外附加一个 Mutations 空方法调用即可
Store.commit(\'UserInfo/RefreshLocalStorage\')

三、总结

讲道理 这种自带的 Mutations 和 Actions 写法 真的好蠢 好恶心人 看着就头大，状态存储类里面还要加业务逻辑去调用接口 不知道vue-element-admin 是怎么思考的，打死我都不想这种操作。