0

目前我正在使用 Vue + Typescript + Vuex 在我的 Vue 组件中使用来自 vuex-class 的装饰器，并按商店模块组织我的文件，例如：

moduleA-store.ts   // state
moduleA-actions.ts
moduleA-mutations.ts
moduleA-getters.ts

我不喜欢默认的 Vuex 设置是不灵活的，比如无法在模块 A 的操作中访问模块 B 的操作。

例如，在我的“auth”商店模块的注册操作中接收个人资料图片，其 URL 应写入我的用户个人资料中，由我的“用户”商店模块的操作处理

据我所知，默认设置无法实现以下目标；我唯一可以从任何地方访问的是各种模块的状态。

它让我想到了通过替换看起来像的当前设置来克服这个问题的小改动

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
    }
}

通过更纯粹、自定义（和类型安全）的设置，如下所示

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) {
        // ...
    } 
}

我现在最想知道的是

  1. 这种方法的优点和缺点/合理的选择？
  2. 这会破坏 Vuex 的一些核心功能吗？
  3. Vuex 的底层是否有一些功能可能会像一些优化/缓存机制一样被破坏（至少在 getter 方面）？
4

0 回答 0