使用 vuex-module-decorators 访问其他状态

vuex-module-decorators 是一个用于 Vue.js 和 Vuex 的装饰器库，它可以让你使用 ES7 语法来编写 Vuex 模块。本文将介绍如何使用该库来访问其他状态。

安装

首先，你需要安装 vuex-module-decorators。你可以使用 npm 或 yarn 来安装它：

npm install vuex-module-decorators --save

或者

yarn add vuex-module-decorators

访问其他状态

如果你需要在一个 Vuex 模块中访问其他模块的状态，那么你需要使用 RootState 属性。示例如下：

import { Module, VuexModule, Mutation, Action } from 'vuex-module-decorators'

@Module
export default class MyModule extends VuexModule {
  // 定义一个 state
  myState: string = 'Hello!'

  // 定义一个 mutation，改变 myState 的值
  @Mutation
  setMyState(newState: string) {
    this.myState = newState
  }

  // 定义一个 action，异步改变 myState 的值
  @Action({ rawError: true })
  public async changeMyState() {
    const response = await fetch('https://example.com/my-api')
    const data = await response.json()
    this.context.commit('setMyState', data)
  }

  // 访问其他模块的 state
  get otherState() {
    return this.context.rootState.someModuleName.someState
  }

  // 访问其他模块的 getter
  get otherGetter() {
    return this.context.rootGetters.someModuleName.someGetter
  }

  // 访问其他模块的 mutation
  @Mutation
  setOtherState(newState: string) {
    this.context.commit('someModuleName/setSomeState', newState, { root: true })
  }

  // 访问其他模块的 action
  @Action({ rawError: true })
  public async doOtherAction(payload: any) {
    await this.context.dispatch('someModuleName/someAction', payload, { root: true })
  }
}

上面的示例中，otherState 和 otherGetter 分别访问了另一个模块的状态和 getter。而 setOtherState 和 doOtherAction 分别调用了另一个模块的 mutation 和 action。

需要注意的是，访问其他模块的状态时，需要使用 this.context.rootState 属性，访问其他模块的 getter、mutation、action 时，需要使用 this.context.rootGetters、this.context.commit、this.context.dispatch 方法，并在最后加上 { root: true }。

结论

在使用 vuex-module-decorators 编写 Vuex 模块时，访问其他状态非常简单。只需使用 this.context.rootState、this.context.rootGetters、this.context.commit、this.context.dispatch 即可。