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

Question

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

我的商店是：

购物车详情.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>

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

Answer 1

1. 您的数据部分看起来不正确。它应该看起来像这样：

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

2. 在mapState中，您应该指出状态属性(如果它们不是来自根状态，则指示它们的模块名称(。我假设carDetail.js是一个商店模块。

computed () {
...mapState({
id: state => state.cartDetail.id,
items: state => state.cartDetail.items
}),
setDefaultSelected () {
return this.items[0];
},
},