[Vuejs]-Vue data being stored in vuex but not displaying in the UI

by

0👍

✅

Try with something like this:

store.js

state: {
  plans: []
},
getters: {
  loadedPlans(state) {
    return state.plans
  },
},
mutations: {
  setPlans(state, plans) {
    state.plans = plans
  }
},
actions: {
  async loadPlans({commit}) {
    await this.$axios.get('http://localhost/api/plans', function(response) {
      commit('setPlans', response.data)
    })
  }
}

plans.vue

async created() {
  await this.$store.dispatch('loadPlans')
},
computed: {
  myPlans() {
    return this.$store.getters.loadedPlans
  }
}

0👍

you can use a computed method for getting the value. The data object is evaluated once even perhaps before the state value is set. Modify your code as follows.

data:{
    return {};
}
,computed: {
    plans: this.$store.getters.loadPlans
}

Leave a comment