在 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 商店時可能會遇到問題。 請參閱此處以供參考。

您最好退后一步思考數據的結構。 您可以設置單個 Vue 實例，並向您的待辦事項列表項數據對象添加一個布爾值。

如果它有助於您的實現，您也可以考慮使 localStorage 具有反應性。