Create multiple unique states using vuex-persistedstate in vuejs

Question

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?

Answer 1

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.