Vuex-persistedstate指定本地化存储的模块-CFANZ编程社区

Vuex-persistedstate指定本地化存储的模块

我们知道,使用Vuex-persistedstate插件,可以让vuex自动存储在localstorage中.当我们使用模块的方式划分vuex的时候,vuex-persistedstate会默认将所有的模块都存储在本地.

/**
 * vuex的入口文件
 */
import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from "vuex-persistedstate/index"

Vue.use(Vuex);

import {article} from "@/store/article";
import {user} from "@/store/user";
import {category} from "@/store/category";
import {editor} from "@/store/editor";

export default new Vuex.Store({
  modules: {
    article,
    user,
    editor,
    category
  },
  plugins: [createPersistedState()]
})

如果只想让指定的模块存储在本地, 我们可以如下添加参数.

plugins: [createPersistedState({
    paths: ["user"]
})]

option常用的配置项

参数	描述
key	存储数据的键名。（默认：vuex）
paths	部分路径可部分保留状态的数组。如果没有给出路径，则将保留完整状态。如果给出一个空数组，则不会保留任何状态。必须使用点符号指定路径。如果使用模块，请包括模块名称（默认：[]）
reducer	将根据给定路径调用以减少状态持久化的函数
storage	指定存储数据的方式。默认为localStorage ，也可以设置 sessionStorage
getState	用来重新补充先前持久状态的功能，默认使用：storage定义获取的方式
setState	用以保持给定状态的函数。默认使用：storage定义的设置值方式
filter	一个将被调用以过滤setState最终将在存储中筛选过滤的函数。默认为() => true。

想要使用存储到cookie的配置如下：

import { Store } from "vuex"
import createPersistedState from "vuex-persistedstate"
import * as Cookies from "js-cookie"
// 使用js-cookie来简化cookie操作
const store = new Store({
  // ...
  plugins: [
    createPersistedState({
      storage: {
        getItem: (key) => Cookies.get(key),
        setItem: (key, value) =>
          Cookies.set(key, value, { expires: 3, secure: true }),
        removeItem: (key) => Cookies.remove(key)
      }
    })
  ]
})

0 条评论