我正在學習 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)
})
})
我想在每個待辦事項串列中的所有待辦事項都完成時創建一個狀態，例如一個 fortodo-list-1一個 fortodo-list-2等等。
const store = new Vuex.Store({
state: {
completed: false
},
plugins: [createPersistedState()],
mutations: {
completed: state => state.completed = true,
}
});
如何根據每個待辦事項串列的 id 創建本地存盤狀態？
uj5u.com熱心網友回復：
您擁有的一種選擇是創建 Vuex 商店的多個實體。
就像是
document.querySelectorAll('.todo-list').forEach(list => {
new Vue({
el: `#${list.id}`,
store,
render: h => h(App)
})
})
嘗試管理多個 Vuex 商店時可能會遇到問題。請參閱此處以供參考。
您最好退后一步思考資料的結構。您可以設定單個 Vue 實體，并向您的待辦事項串列項資料物件添加一個布林值。
如果它有助于您的實作，您還可以考慮使 localStorage 具有反應性。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/342598.html
標籤：javascript Vue.js Vuex
下一篇：在<v-row>之間對齊