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

Question

I would like to set properties to buttons that I use in various parts of my project, and therefore I cannot insert static text in each button, but I have tried to use the state of vuex so that if I have to change the name it I change only in the state for all buttons, instead of going to change it by looking for it in every single button. This solution does not work for me because nothing appears in the buttons, instead the words "Foo" and "Bar" should appear (indeed I would like them to appear to me). In practice it does not take the btnType property.

This is one of my components:

 <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>

And this is my index file:

 import Vue from "vue";
 import Vuex from "vuex";
 Vue.use(Vuex);

 export default new Vuex.Store({
   state: {
     buttonFoo: "Foo",
     buttonBar: "Bar"
   },
 mutations: {},
 etc...
 });

data evaluates before computed property, hence can not access computed property in data. — Nilesh Patel
do you have a solution? if i try to load the mapState in a created instead of computed, could it work? — Luke_C

Nilesh Patel Nilesh Patel · Accepted Answer · 2021-01-19T14:51:38

data evaluates before computed property, hence can not access computed property in data.

better to do it in 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 property data... is it possible?

1 Answers