Currently I'm using Vue + Typescript + Vuex making use of the decorators from vuex-class in my Vue components and organize my files per store module like:
moduleA-store.ts // state
moduleA-actions.ts
moduleA-mutations.ts
moduleA-getters.ts
What I don't like about that default Vuex setup is the inflexibility like not being able to access an action from module B inside an action of module A.
e.g. receiving a profile picture in an signup action of my "auth" store module whose URL should be written in my user profile handled by an action of my "user" store module
As far as I know there is no way with the default setup to achieve the following; the only thing I can access from anywhere is the various module's state.
It made me think of small changes to overcome this by replacing the current setup which looks something like
auth-actions.ts
export const actions: ActionTree<AuthState, RootState> = {
signInWithGoogle({ commit }, payload) {
// ...
commit('setWhatever', whatever)
}
}
auth-mutations.ts
export const mutations: MutationTree<AuthState> = {
setWhatever(state, whatever) {
state.whatever = whatever
}
}
by a more pure, custom (and typesafe) setup like the following
auth-actions.ts
import authMutations from 'auth-mutations.ts'
import userActions from 'user-actions.ts'
export const authActions = {
async signInWithGoogle(payload) {
// ...
authMutations.setWhatever(whatever)
userActions.setProfileURL(url)
}
}
auth-mutations.ts
import authState from 'auth-store.ts'
export const authMutations = {
setWhatever(whatever: string) {
authState.whatever = whatever
}
}
user-actions.ts
export const userActions = {
setProfileURL(url: string) {
// ...
}
}
What I wonder most now is
- Pros and Cons of this approach / reasonable alternatives?
- Does this break some core functionality of Vuex?
- Is there even some functionality under the hood of Vuex that could be broken like some optimization/caching mechanisms (at least on the getter side)?
