vuex state inside export default 属性 data...这可能吗？

Question

我想为我在项目的各个部分使用的按钮设置属性，因此我不能在每个按钮中插入静态文本，但我已经尝试使用 vuex 的状态，这样如果我必须更改名称我只在所有按钮的状态下更改它，而不是通过在每个按钮中查找它来更改它。这个解决方案对我不起作用，因为按钮中什么都没有出现，而是应该出现“Foo”和“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

数据在计算属性之前计算，因此无法访问数据中的计算属性。

最好在 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",
         },
       ],
   }
 };

vuex state inside export default 属性 data...这可能吗？

vuex state inside export default property data... is it possible?

javascript

state

button

vue.js

vuex