Vue组件的data属性内能否使用Vuex State？按钮文本无法读取Vuex状态值问题求助

你遇到的核心问题是组件data的初始化时机早于computed属性。当Vue实例创建时，data里的buttons数组会先被初始化，而此时mapState映射的buttonFoo和buttonBar还没完成计算，所以this.buttonFoo、this.buttonBar都是undefined，导致按钮无法显示预期文本。

下面给你几个实用的解决办法：

方案一：把buttons转为计算属性（推荐） #

将buttons从data移到computed中，让它依赖Vuex的响应式状态，这样状态更新时按钮文本会自动同步：

<template> 
<div> 
<b-button v-for="(btn, idx) in buttons" :key="idx" :class="btn.class" variant="info" :name="btn.btnType" >{{ btn.btnType }}</b-button > 
</div> 
</template> 
<script> 
import { mapState } from "vuex"; 
export default { 
computed: { 
...mapState({ 
buttonFoo: "buttonFoo", 
buttonBar: "buttonBar", 
}), 
// 转为计算属性，依赖Vuex状态
buttons() {
  return [
    { btnType: this.buttonFoo, state: true, class: "button-class1" },
    { btnType: this.buttonBar, state: false, class: "button-class2" },
  ];
}
}, 
}; 
</script>

方案二：在created钩子中初始化buttons #

created钩子触发时，组件的computed属性已经初始化完成，此时能正确获取到Vuex的状态：

<template> 
<div> 
<b-button v-for="(btn, idx) in buttons" :key="idx" :class="btn.class" variant="info" :name="btn.btnType" >{{ btn.btnType }}</b-button > 
</div> 
</template> 
<script> 
import { mapState } from "vuex"; 
export default { 
computed: { 
...mapState({ 
buttonFoo: "buttonFoo", 
buttonBar: "buttonBar", 
}), 
}, 
data() { 
return { 
buttons: [], 
}; 
},
created() {
  // 此时computed已就绪，可正确获取Vuex状态
  this.buttons = [
    { btnType: this.buttonFoo, state: true, class: "button-class1" },
    { btnType: this.buttonBar, state: false, class: "button-class2" },
  ];
}
}; 
</script>

方案三：直接通过$store访问状态（快速临时方案） #

如果buttons的其他属性不需要响应式更新，也可以直接在data里通过this.$store.state访问Vuex状态：

<template> 
<div> 
<b-button v-for="(btn, idx) in buttons" :key="idx" :class="btn.class" variant="info" :name="btn.btnType" >{{ btn.btnType }}</b-button > 
</div> 
</template> 
<script> 
export default { 
data() { 
return { 
buttons: [ 
{ btnType: this.$store.state.buttonFoo, state: true, class: "button-class1" }, 
{ btnType: this.$store.state.buttonBar, state: false, class: "button-class2" }, 
], 
}; 
}, 
}; 
</script>

注意：如果后续需要通过Vuex的mutations修改按钮文本，方案一和方案二会自动同步按钮显示；方案三若要响应状态变化，仍需将buttons转为计算属性。

内容的提问来源于stack exchange，提问作者Luca