En mi proyecto, tengo una tienda vuex bastante compleja que guarda los valores de las entradas de filtro y los convierte en filtros que puedo usar para consultar más tarde el backend. Uso esos filtros junto a dos tablas diferentes. Si filtro para id = 123 en la tabla 1, NO quiero que el filtro en la tabla 2 sea id = 123. Es por eso que creé un módulo e intenté usar una tienda con espacio de nombres. Mi tienda vuex index.js se parece a esto:
import myFilterModule from './filter.module'; Vue.use(Vuex); export default new Vuex.Store({ modules: { filter1: myFilterModule, filter2: myFilterModule, }, });Y mi módulo se ve así:
const state = { idFilter: null, }; const actions = {}; const mutations = { [SET_ID_FILTER](state, id) { state.idFilter = id; }, }; const getters = { getFilter(state) { return state.idFilter; }, }; export default { namespaced: true, state: () => state, actions, mutations, getters, };El problema es que si confirmo un cambio en cualquiera de esos espacios de nombres como este:
this.$store.commit('filter1/' + SET_ID_FILTER, '123');Ambas funciones:
this.$store.state['filter1'].idFilter this.$store.state['filter2'].idFilterDevuelve lo mismo. Aunque ni siquiera me puse. idFilter en filtro2.
¿Estoy usando mal los espacios de nombres?
El problema es que un estado es el mismo objeto en ambas copias del módulo. Si se supone que un módulo debe reutilizarse, el estado inicial debe crearse con la función de fábrica:
const state = () => ({ idFilter: null, }); ... export default { namespaced: true, state, ... }; Esta es la razón por la cual se permite que el state sea una función.