De acuerdo con los documentos , si simplemente devuelvo el estado como una función, debería poder reutilizar el módulo de tienda. Sin embargo, cuando hice esto, mi módulo de tienda vuex aún compartía el estado en todas las instancias del componente.

Aquí está el marcado del componente:

 <template> <button class="button" type="button" @click="onClick">{{ count }}</button> </template> <script> import {mapState, mapMutations} from 'vuex'; export default { name: 'sub-component', computed: { ...mapState('myModule', ['count']) }, methods: { ...mapMutations('myModule', ['INCREMENT_COUNT']), onClick() { this.INCREMENT_COUNT(); } } }; </script>

Aquí está mi módulo de tienda:

 const namespaced = true; const state = () => { return { count: 0 }; }; const mutations = { INCREMENT_COUNT(state) { state.count++; }, }; export default { namespaced, state, mutations };

Entonces, en mi componente principal, tengo un número arbitrario de instancias de "subcomponente" (botón). Cuando hago clic, se incrementa, pero se incrementa para todas las instancias. ¿Hay alguna manera de seguir utilizando la tienda Vuex sin compartir el estado en todas las instancias de mi subcomponente?

Contexto: estoy usando Vuex en un SPA, por lo que es un caso de uso estándar para administrar el estado/métodos entre componentes en SPA. Pero también tengo componentes profundamente anidados que interactúan y actualizan otros componentes en el SPA (pero estos otros componentes deben mantenerse en su propio estado). Sí, no tengo que usar Vuex, pero parecía que sería más limpio.