I have to following situation with vue2/vuex; Let's say I have a users module where I store all users I fetched from my api.
I use this module to populate, for example, dropdown lists containing all users.
Now I also have a users page, but this page has the option to filter, paginate users etc. This happens serverside, so the module will be updated with the new list of (filtered) users.
Should I create two separate modules for both usecases (usersOptions and usersView)? To me it would seem more logical to create two instances of the user store, but apparently that's not possible with Vuex. How would you handle a situation like this?
Here is an example of the my users module:
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);
});
});
},
},
};
Two stores its never the soultion in my opinion, try to seperate to 2 modules. find more here: https://vuex.vuejs.org/guide/modules.html
Intuitively, I'd do something like that. Haven't tested it but it's probably not ready to use yet.
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);
})
},
},
};