从本地存储以vuex-persistedstate恢复状态

Question

我想使用vuex-persistedstate来存储已登录用户而不是未登录用户的购物车值。 在登录和注销后，我想执行一个操作或更改，这将从本地存储加载状态。

为区分用户，我将适当的密钥设置如下：

import createPersistedState from 'vuex-persistedstate'

export default ({store}) => {
  window.onNuxtReady(() => {

    let key;
    (!!store.state.user.info) ? key = store.state.user.info.id : key = 'guest'; 

    createPersistedState({
      key,
      paths: [
        'cart'
      ]
    })(store)

  })
}

然后在本地存储中，我可以存储用户和访客购物车：

---

  

user_id_here | {“ cart”：[{“ id”：1，“ quantity”：3，“ sku”：“ ce11eda1-0331-4d64-8793-0646ef287a6b”}，{“ id”：1，“ quantity”：14，“ sku“：” 2631399 ...

---

  

客人| {“ cart”：[{“ id”：3，“ quantity”：1，“ sku”：“ ce1dsada1-0221-4d64-8133-0646ef287a6b”}，{“ id”：5，“ quantity”：1，“ sku“：” 2685979 ...

---

示例场景：

1. 用户通过访客打开网站。
2. 运行时应用程序的键名为persistedState-来宾车。
3. 客人添加一些产品或其他内容。
4. 用户登录-触发为登录用户创建新状态，可能会合并购物车。
5. 用户向购物车添加一些值，这些值保存在用户购物车中。
6. 用户注销-在来宾上触发更改状态。

主要问题是：

如何根据vuex动作，突变或其他原因从处于vuex持久状态的本地存储中加载状态？

简而言之：用户登录/注销-插件检测到操作或突变，因此它将为特定客户（用户/来宾）重新加载状态