vuex数据持久化存储

简介：

Vue项目中使用Vuex，相当于全局的变量存储，可以在所有的vue组件中共享数据、动态修改数据。

当我们刷新浏览器的时候，store中的状态都会被清空、重新初始化为最初的状态，在某些情况下，我们可能需要将这些状态保存下来，所以这篇来介绍如何让vuex状态持久化存储。

方法一：手写方式

新建一个名为SessionUtils.js的文件

export class SessionUtils {
  static get(key) {// 获取
    return JSON.parse(window.sessionStorage.getItem(key));
  }
  static set(key, value) {// 添加
    window.sessionStorage.setItem(key, JSON.stringify(value));
  }
  static remove(key) {// 删除
    window.sessionStorage.removeItem(key);
  }
}

使用方式

import { SessionUtils } from "../utils/SessionUtils.js";// 引入SessionUtils.js
export default {
  state: {
    content: SessionUtils.get("content") | null,// 获取
  },
  mutations: {
    //每当我们去修改状态的时候，都会往session中存储一下，
    // 浏览器刷新的时候，就会先从 session中取，达到持久化存储效果
    setBtn(state, val) {// 添加
      SessionUtils.set("content", state.content);
    },
    removeBtn(state, val) {// 删除持久化状态
        SessionUtils.remove("content");
      },
  },
  actions: {},
};

方法二：使用第三方插件 npm install vuex-persistedstate

使用方式

import Vue from "vue";
import Vuex from "vuex";
import tab from "./tab.js";
import user from "./user.js";
Vue.use(Vuex);
// 引入插件
import createPersistedState from "vuex-persistedstate";
export default new Vuex.Store({
  modules: {
    tab,
    user,
  },
  /* vuex数据持久化配置 */
  plugins: [
    // 方法一 存储所有的state状态
    createPersistedState({
      storage: window.sessionStorage, // 存储方式：localStorage、sessionStorage、cookies
      key: "store", // 存储的的key值
      reducer(state) {
        // 存储了state中所有的数据
        return { ...state };
      },
    }),
// 方法二 存储指定的状态
    // createPersistedState({
    //     storage: window.sessionStorage,
    //     key: "user",
    //     // 只持久化存储user模块的状态
    //     paths: ['user']
    // })
  ],
});