Create multiple unique states using vuex-persistedstate in vuejs-CodePudding

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?

CodePudding user response：

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.