Vuex 映射状态在组件中始终未定义答案

【问题标题】：Vuex mapped state always undefined in componentVuex 映射状态在组件中始终未定义
【发布时间】：2020-05-28 09:03:53
【问题描述】：

我有一个命名空间的 Vuex 存储模块，我正在尝试访问该模块在组件中的状态（通过 mapState）以在我的数据中设置默认值。但是，我的组件中始终未定义“映射状态”。

我的商店是：

cartDetail.js

export const defaults = {
  id: null,
  items: [],
},
const state = { ...defaults, };
export default {
  namespaced: true,
  state,
}

在我的组件中，我有：

<script>
 import { mapState, mapActions, } from 'vuex';

 data() {
    defaultSelected: this.cartDetail.items[0],
 },

 computed () {
  ...mapState('cartDetail', ['cartDetail,'],),

  setDefaultSelected () {
   return this.cartDetail.items[0];
  },
 },

 created () {
    this.cartFetch(userId);
 }
</script>

即使我 console.log(this.cartDetail); 在我的 setDefaultSelected 计算或创建的钩子中，它也是未定义的！任何帮助将不胜感激！

【问题讨论】：

标签： vue.js vue-component vuex

【解决方案1】：

您的数据部分看起来不正确。它应该如下所示：

data() {
    return {
      defaultSelected: this.items[0]
    }
 },

在 mapState 中，您应该指明状态道具（如果它们不是来自根状态，则应指明它们的模块名称）。我假设 carDetail.js 是一个商店模块。

computed () {
  ...mapState({
     id: state => state.cartDetail.id,
     items: state => state.cartDetail.items
  }),

  setDefaultSelected () {
   return this.items[0];
  },
 },

【讨论】：