vue-persistedstate同时使用reducer与paths时paths失效如何解决

当你自定义reducer配置后，vue-persistedstate内置的paths筛选逻辑会被完全覆盖，不会自动生效，直接返回完整的val对象就会把所有Vuex模块都持久化。

你可以将需要持久化的路径抽为公共常量，在reducer中手动实现筛选逻辑即可保留原有的paths规则：

// 抽离需要持久化的模块路径为公共常量，方便后续统一修改
const PERSIST_PATHS = ["auth", "venues", "play", "playWS", "purchaseSettings"]

const persistedstate = createPersistedState({
  key: "newsportal-vuex",
  storage: window.localStorage,
  paths: PERSIST_PATHS,
  reducer(val) {
    if (!localStorage.getItem("newsportal_isuseracceptcookie")) {
      // 用户未同意Cookie时返回空对象，不执行任何持久化
      return {};
    }
    // 手动筛选仅返回paths指定的模块数据
    return PERSIST_PATHS.reduce((res, moduleName) => {
      res[moduleName] = val[moduleName]
      return res
    }, {})
  }
});

如果你的paths配置中存在嵌套路径（例如auth.user.info这种多层级取值场景），可以补充嵌套路径处理逻辑：

// 嵌套路径取值工具函数
function getValueByPath(obj, path) {
  return path.split('.').reduce((current, key) => current?.[key], obj)
}

// 嵌套路径赋值工具函数
function setValueByPath(obj, path, value) {
  const pathArr = path.split('.')
  const lastKey = pathArr.pop()
  let current = obj
  pathArr.forEach(key => {
    current[key] = current[key] || {}
    current = current[key]
  })
  current[lastKey] = value
  return obj
}

const PERSIST_PATHS = ["auth.user.token", "venues.list", "play", "playWS", "purchaseSettings"]
const persistedstate = createPersistedState({
  key: "newsportal-vuex",
  storage: window.localStorage,
  paths: PERSIST_PATHS,
  reducer(val) {
    if (!localStorage.getItem("newsportal_isuseracceptcookie")) {
      return {};
    }
    return PERSIST_PATHS.reduce((res, path) => {
      const value = getValueByPath(val, path)
      setValueByPath(res, path, value)
      return res
    }, {})
  }
});

内容的提问来源于stack exchange，提问作者bondythegreat