nuxt中vuex数据持久化

发表于 更新于 分类于

在 nuxt 中使用 vuex,为了数据持久化使用 vuex-persistedstate，但是在使用中发现找不到 window 对象，因此需要借助 cookie 来完成。

使用 vuex-persistedstate

1
npm install --save vuex-persistedstate
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import createPersistedState from "vuex-persistedstate";
import vuex from "vuex";
const conststore = new vuex.Store({
  // ...
  plugins: [
    createPersistedState({
      storage: window.sessionStorage,
      reducer(val) {
        return {
          //各种操作
        };
      }
    })
  ]
});

使用 js-cookie

1
npm install --save js-cookie

在 plugins 中新建文件 localStorage.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import createPersistedState from "vuex-persistedstate";
import * as Cookies from "js-cookie";

let cookieStorage = {
  getItem: function (key) {
    return Cookies.getJSON(key);
  },
  setItem: function (key, value) {
    return Cookies.set(key, value, { expires: 3, secure: false });
  },
  removeItem: function (key) {
    return Cookies.remove(key);
  }
};

export default context => {
  createPersistedState({
    storage: cookieStorage,
    getState: cookieStorage.getItem,
    setState: cookieStorage.setItem
  })(context.store);
};

在 nuxt.config.js 中新增

1
plugins: [{ src: '@/plugins/localStorage.js', ssr: false }],

这两者结合使用，会发现页面刷新后保存在 vuex 中的数据仍然有效，不会回到初始数据。