在 vuejs 中使用 vuex-persistedstate 创建多个唯一状态答案

【问题标题】：Create multiple unique states using vuex-persistedstate in vuejs在 vuejs 中使用 vuex-persistedstate 创建多个唯一状态
【发布时间】：2021-10-29 16:51:17
【问题描述】：

我正在学习 vue.js 并尝试使用vuex-persistedstate 来保存一些状态。我创建了一个简单的待办事项应用程序，每个应用程序都有一个唯一的 ID。

我正在遍历所有这些并创建一个像这样的 vue 实例：

<div id="todo-list-1" class="todo-list">...</div>
<div id="todo-list-2" class="todo-list">...</div>
<div id="todo-list-3" class="todo-list">...</div>

document.querySelectorAll('.todo-list').forEach(list => {
   new Vue({
     el: `#${list.id}`,
     render: h => h(App)
   })
})

我想在每个待办事项列表中的所有待办事项都完成时创建一个状态，例如一个用于todo-list-1，一个用于todo-list-2等等。

const store = new Vuex.Store({
  state: {
    completed: false
  },
  plugins: [createPersistedState()],
  mutations: {
    completed: state => state.completed = true,

  }
});

如何根据每个待办事项列表的 id 创建本地存储状态？

【问题讨论】：

这可能是 XY 问题。首先，您不需要多个 Vue 应用程序实例，除非您知道自己需要。只要有 1 个应用和 1 个商店，一切都很简单。
是的，但是我需要有多个vue实例，我想用不同的数据api为不同的目的有不同的待办事项。
这听起来不像是一个正确的推理，更像是您需要多个组件，而不是应用程序。如果您仍在学习 Vue，那么以正确的方式开始学习是有意义的。正确的做法是默认使用 1 个应用实例。

标签： javascript vue.js vuex

【解决方案1】：

您可以选择创建多个 Vuex 商店实例。

类似

document.querySelectorAll('.todo-list').forEach(list => {
   new Vue({
     el: `#${list.id}`,
     store,
     render: h => h(App)
   })
})

您在尝试管理多个 Vuex 商店时可能会遇到问题。参考here。

您最好退后一步，考虑一下您的数据结构。您可以设置单个 Vue 实例，并向您的待办事项列表项数据对象添加一个布尔值。

如果对您的实施有帮助，您也可以考虑 making localStorage reactive。

【讨论】：

你有什么例子可以在我这样添加商店时如何使用它吗？
我手头没有任何东西。您尝试做的事情大致类似于微前端架构，其中页面的不同部分是独立的，但“缝合”在一起以创建一个有凝聚力的页面。 micro-frontends.org 或许能给你一些方向。我见过一些组织使用 Docker 来构建一个容器来组装不同的页面。如果我发现任何其他内容，我会添加额外的 cmets。