导出默认属性数据中的vuex状态.这可能吗?

Question

我想将属性设置为我在项目的各个部分使用的按钮，因此我不能在每个按钮中插入静态文本，但我试图使用vuex的状态，以便如果我必须更改名称，我只更改所有按钮的状态，而不是通过在每个按钮中查找它来更改它。这个解决方案不适合我，因为按钮中没有出现任何东西，取而代之的是"Foo"one_answers";Bar"应该出现(事实上，我希望它们出现在我面前)。在实践中，它不取btnType的属性。

这是我的组件之一:

<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, mapMutations } from "vuex";
export default {
computed: {
...mapState({
buttonFoo: "buttonFoo",
buttonBar: "buttonBar",
}),
},
data() {
return {
buttons: [
{
btnType: this.buttonFoo,
state: true,
class: "button-class1",
},
{
btnType: this.buttonBar,
state: false,
class: "button-class2",
},
],
};
},
};
</script>

这是我的索引文件

import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export default new Vuex.Store({
state: {
buttonFoo: "Foo",
buttonBar: "Bar"
},
mutations: {},
etc...
});

Answer 1

data在计算属性之前求值，因此不能访问data中的计算属性。

最好在mounted

export default {
computed: {
...mapState({
buttonFoo: "buttonFoo",
buttonBar: "buttonBar",
}),
},
data() {
return {
buttons: []
};
},
mounted(){
this.buttons=[
{
btnType: this.buttonFoo,
state: true,
class: "button-class1",
},
{
btnType: this.buttonBar,
state: false,
class: "button-class2",
},
],
}
};