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

Question

我正在学习 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 创建本地存储状态？

Answer 1

您可以选择创建多个 Vuex 存储实例。

类似

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

您可能运行在尝试管理多个 Vuex 商店时遇到问题。请参阅 here 以供参考。

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

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

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

Create multiple unique states using vuex-persistedstate in vuejs

javascript

vue.js

vuex