时间戳

首页 > 解决方案 > 非命名空间模块上的 mapState

vue.js - 非命名空间模块上的 mapState

问题描述

我有一个模块

export default {
  namespaced: false,
  state,
  actions,
  mutations,
  getters
};

在我的组件中，我尝试了这些：

 ...mapState(["user"]),
 ...mapState('auth',["user"]),

但它们都不起作用，相反我必须将其用作计算属性：

user() { return this.$store.state.auth.user; },

是否可以使用 ...mapState？

标签： vue.jsvuexvuex-modules

解决方案

地图获取者

使用非命名空间模块最有效的方法是定义一个 getter。优点是您不必在要使用该属性的每个组件中重新定义它。

getters: {
  user: state => state.user,
}

...mapGetters([
  "user",
]),

这与您“不应该过度使用 getter”的某些信念相反，但这是一个可悲的现实，这是 Vuex 出错的一件事。由于非命名空间模块与根状态共享它们的命名空间，它们的道具也应该立即可用，但它们不是。

地图状态

如果您想改用 mapState，我认为嵌套解构语法对此没有任何好处：

...mapState({
  user: ({ auth: { user } }) => user,
}),

这根本不可读。这不会使您的代码更短，因为无论如何您都需要重复道具名称。这是要走的路：

...mapState({
  user: state => state.auth.user,
}),

推荐阅读