When I am loading a getter that returns an id in computed property. I try to print the 'id' in a method, the id value is empty for the first time when app loads. But then, when i edit a file and save I can see this id is getting printed in console. Or when I do setTimeout of 1 sec, I can see the getter.
This 'id' value is important and I want to access as a global variable. I want it access crop id right when app load. Because based on this value I will be making a few api calls.
The crop id is set from result of a api call.
store.commit("setCropId", list.id);
My vuex
state:{
crop: ""
},
mutations: {
setCropId(state, value) {
state.crop = value;
}
},
actions:{
actionCropId ({ commit }, value) {
commit('setCropId', value)
}
},
getters: {
getCropId: state => {
return state.crop;
}
}
My vue component
import { mapGetters } from "vuex";
computed: {
...mapGetters([
'getCropId',
])
},
mounted() {
this.myCrops();
},
methods: {
async myCrops() {
console.log('my crops', getCropId)
// other logic
}
}
I dont know how to make it work. Please suggest if I am doing anything wrong or how to get getters right away when app loads.
Thank you
