Estoy aprendiendo vue.js y tratando de usar vuex-persistedstate para guardar algunos estados. Creé una aplicación de tareas simples y cada una tiene una identificación única.
Estoy iterando a través de todos ellos y creando una instancia de vue como esta:
<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) }) }) Quiero crear un estado cuando se completen todos los elementos de cada lista de tareas pendientes, por ejemplo, uno para todo-list-1 y otro para todo-list-2 y así sucesivamente.
const store = new Vuex.Store({ state: { completed: false }, plugins: [createPersistedState()], mutations: { completed: state => state.completed = true, } });¿Cómo puedo crear estados de almacenamiento local basados en la identificación de cada lista de tareas pendientes?
Una opción que tiene es crear varias instancias de su tienda Vuex.
Algo como
document.querySelectorAll('.todo-list').forEach(list => { new Vue({ el: `#${list.id}`, store, render: h => h(App) }) })Es posible que tenga problemas al intentar administrar varias tiendas Vuex. Ver aquí para referencia.
Es posible que le convenga dar un paso atrás y pensar en la estructura de sus datos. Puede configurar una sola instancia de Vue y agregar un valor booleano a su objeto de datos del elemento de la lista de tareas pendientes.
También podría considerar hacer que localStorage sea reactivo si le ayudara con su implementación.