How to access the getter from another vuex module?

当在 Vuex 中使用模块化时，有时我们需要从一个模块中访问另一个模块的状态或者 getter。这可以通过使用 rootState 和 rootGetters 参数来实现，这两个参数可在模块内部的 getter、action 和 mutation 中使用。

访问其他模块的 Getter

假设我们有一个 Vuex 存储，它被分成了两个模块：moduleA 和 moduleB。如果我们想从 moduleA 中访问 moduleB 的 getter，我们可以在 moduleA 的 getter 中使用 rootGetters 参数。

示例

假设我们的 Vuex store 结构如下：

javascript
const moduleA = {
  state: () => ({
    name: 'Alice'
  }),
  getters: {
    greeting: (state, getters, rootState, rootGetters) => {
      // 访问 moduleB 的 fullName getter
      return `Hello, ${rootGetters['moduleB/fullName']}!`;
    }
  }
};

const moduleB = {
  state: () => ({
    firstName: 'Bob',
    lastName: 'Smith'
  }),
  getters: {
    fullName: (state) => {
      return `${state.firstName} ${state.lastName}`;
    }
  }
};

const store = new Vuex.Store({
  modules: {
    moduleA,
    moduleB
  }
});

在上面的代码中，我们在 moduleA 的 greeting getter 中使用了 rootGetters 来访问 moduleB 的 fullName getter。请注意我们是如何使用命名空间（即 'moduleB/fullName'）来访问它的。这是因为每个模块都是独立的命名空间，所以我们需要指定模块名来正确访问所需的 getter。

总结

总的来说，通过使用 rootGetters 和模块名前缀，我们可以在一个模块的 getter、action 或 mutation 中访问另一个模块的状态或 getter。这种方法提高了模块间的交互性和灵活性，使得 Vuex 的模块化更加强大和实用。