I am learning vue.js and trying to use vuex-persistedstate to save some states. I created a simple todo app and each one has a unique id.
I am iterating through all of them and create a vue instance like this:
<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)
})
})
I want to create a state when all todo items in each todo list are completed, for example one for todo-list-1 and one for todo-list-2 and so on.
const store = new Vuex.Store({
state: {
completed: false
},
plugins: [createPersistedState()],
mutations: {
completed: state => state.completed = true,
}
});
How can I create local storage states based on id for each todo list?
One option that you have is to create multiple instances of your Vuex store.
Something like
document.querySelectorAll('.todo-list').forEach(list => {
new Vue({
el: `#${list.id}`,
store,
render: h => h(App)
})
})
You might run into problems trying to manage multiple Vuex stores. See here for reference.
You might be better served taking a step back and thinking about the structure of your data. You can set up a single Vue instance, and add a boolean to your to-do list item data object.
You could also consider making localStorage reactive if it would help with your implementation.