非命名间隔模块上的mapState

Question

我有一个模块

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

在我的组件中，我已经尝试过这些：

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

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

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

是否可以使用... mapState？

Answer 1

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

这里是小提琴

https://jsfiddle.net/caseyjoneal/7x4p3crm/20/

Answer 2

mapGetters

使用non-namespaced模块的最有效方法是定义一个吸气剂。优点是您不必在要使用该属性的每个组件中重新定义它。

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

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

这与您“不应过度使用吸气剂”的某些信念相对立，但是令人遗憾的现实是，这是Vuex弄错的一件事。由于未命名空间的模块与根状态共享其命名空间，因此它们的道具也应该立即可用，但不是。

mapState

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

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

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

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