Vue：vuex状态数据持久化插件vuex-persistedstate

Vue项目使用Vuex保存全局状态。Vuex默认是存储到内存中，如果刷新浏览器状态就会重置。这就需要持久化状态数据。

不过，需要注意的是，有一些数据并不需要持久化。

文档：

1. Vue CLI
2. vuex
3. vuex-persistedstate
4. js-cookie

项目结构

# 项目结构
$ tree 
.
├── package.json
├── main.js
├── App.vue
└── store
    ├── cookie-storage.js
    ├── index.js
    └── persistedstate.js

# 快速原型开发
$ vue serve

代码

依赖 package.json

{
  "dependencies": {
    "js-cookie": "^2.2.1",
    "vue": "^2.6.12",
    "vuex": "^3.6.2",
    "vuex-persistedstate": "^4.0.0-beta.3"
  }
}

程序入口 main.js

import Vue from "vue";
import App from "./App.vue";
import store from "./store";

const app = new Vue({
  el: "#app",
  store: store,
  render: (h) => h(App),
});

export default app;

组件 App.vue

<template>
  <div class="">
    <input
      type="text"
      v-model="name"
    >
  </div>
</template>

<script>
export default {
  name: '',

  computed: {
    name: {
      get() {
        // 取出数据
        return this.$store.getters.name;
      },
      set(val) {
        // 更新数据
        this.$store.dispatch('setName', val);
      },
    },
  },
};
</script>

<style lang="scss" scoped>
</style>

Vuex组件入口 store/index.js

import persistedState from "./persistedstate";
import Vuex from "vuex";
import Vue from "vue";

Vue.use(Vuex);

const store = new Vuex.Store({
  // 数据状态
  state: { name: "" },

  // 获取 getter
  getters: {
    name: (state) => {
      console.log("getters.name");
      return state.name;
    },
  },

  // 同步 setter
  mutations: {
    setName(state, name) {
      console.log("mutations.setName");
      state.name = name;
    },
  },

  // 异步 setter
  actions: {
    setName({ commit }, name) {
      console.log("actions.setName");
      commit("setName", name);
    },
  },

  // 持久化插件 
  plugins: [persistedState],
});

export default store;

持久化插件 store/persistedstate.js

import createPersistedState from "vuex-persistedstate";
import CookieStorage from "./cookie-storage.js";

const persistedState = createPersistedState({
  // 默认存储到localStorage
  //   storage: window.localStorage

  // 存储到cookie
  storage: CookieStorage,
});

export default persistedState;

自定义持久化存储 store/cookie-storage.js

import Cookies from "js-cookie";

const CookieStorage = {
  getItem: (key) => Cookies.get(key),
  setItem: (key, value) => Cookies.set(key, value, { expires: 7 }),
  removeItem: (key) => Cookies.remove(key),
};

export default CookieStorage;