Tengo que seguir la situación con vue2/vuex; Digamos que tengo un módulo de usuarios donde almaceno a todos los usuarios que obtuve de mi API.
Uso este módulo para completar, por ejemplo, listas desplegables que contienen todos los usuarios.
Ahora también tengo una página de usuarios, pero esta página tiene la opción de filtrar, paginar usuarios, etc. Esto sucede en el servidor, por lo que el módulo se actualizará con la nueva lista de usuarios (filtrados).
¿Debo crear dos módulos separados para ambos casos de uso (usersOptions y usersView)? Para mí, parecería más lógico crear dos instancias del almacén de usuarios, pero aparentemente eso no es posible con Vuex. ¿Cómo manejarías una situación así?
Aquí hay un ejemplo del módulo mis usuarios:
import UserRepository from '@/repositories/UserRepository'; export default { namespaced: true, state: { loading: false, users: [], }, getters: { isLoading(state) { return state.loading; }, data(state) { return state.users; }, options: (state) => (value = 'id', label = 'name') => state.users.map( (user) => ({ value: user[value], label: user[label] }), ), }, mutations: { SET_LOADING(state, payload) { state.loading = payload; }, SET_DATA(state, payload) { state.users = payload; }, }, actions: { fetch({ commit }) { return new Promise((resolve, reject) => { commit('SET_LOADING', true); UserRepository.index({ limit: 0 }) .then((response) => { const users = response.data.data; commit('SET_DATA', users); resolve(response); }) .catch((error) => { reject(error); }) .finally(() => { commit('SET_LOADING', false); }); }); }, }, };En mi opinión, dos tiendas nunca es la solución, intente separarlas en 2 módulos. encuentre más aquí: https://vuex.vuejs.org/guide/modules.html
Intuitivamente, haría algo así. No lo he probado, pero probablemente aún no esté listo para usar.
import UserRepository from '@/repositories/UserRepository'; export default { namespaced: true, state: { loading: false, users: [], }, getters: { isLoading(state) { return state.loading; }, data(state) { return state.users; }, usersView() { return state.users.view; }, usersOptions() { return state.users.options; }, options: (state) => (value = 'id', label = 'name') => state.users.map( (user) => ({ value: user[value], label: user[label] }), ), }, mutations: { SET_LOADING(state, payload) { state.loading = payload; }, SET_DATA(state, key, payload) { state.users[key] = payload; }, }, actions: { fetch({ commit }, params) { return new Promise((resolve, reject) => { commit('SET_LOADING', true); UserRepository.index(params) .then((response) => { resolve(response.data.data); }) .catch((error) => { reject(error); }) .finally(() => { commit('SET_LOADING', false); }); }); }, fetchOptions() { this.dispatch('fetch', { limit: 0 }).then((users) { commit('SET_DATA', 'options', users); }) }, fetchView() { this.dispatch('fetch', { limit: 15, page: 1 }).then((users) { commit('SET_DATA', 'view', users); }) }, }, };