link3151 link3152 link3153 link3154 link3155 link3156 link3157 link3158 link3159 link3160 link3161 link3162 link3163 link3164 link3165 link3166 link3167 link3168 link3169 link3170 link3171 link3172 link3173 link3174 link3175 link3176 link3177 link3178 link3179 link3180 link3181 link3182 link3183 link3184 link3185 link3186 link3187 link3188 link3189 link3190 link3191 link3192 link3193 link3194 link3195 link3196 link3197 link3198 link3199 link3200 link3201 link3202 link3203 link3204 link3205 link3206 link3207 link3208 link3209 link3210 link3211 link3212 link3213 link3214 link3215 link3216 link3217 link3218 link3219 link3220 link3221 link3222 link3223 link3224 link3225 link3226 link3227 link3228 link3229 link3230 link3231 link3232 link3233 link3234 link3235 link3236 link3237 link3238 link3239 link3240 link3241 link3242 link3243 link3244 link3245 link3246 link3247 link3248 link3249 link3250 link3251 link3252 link3253 link3254 link3255 link3256 link3257 link3258 link3259 link3260 link3261 link3262 link3263 link3264 link3265 link3266 link3267 link3268 link3269 link3270 link3271 link3272 link3273 link3274 link3275 link3276 link3277 link3278 link3279 link3280 link3281 link3282 link3283 link3284

[Vue.js] Cant pass parameter from store vuex in api call using router

I try to fetch data with axios get with parameter that come from vuex store.
Problem is i get parameter undefined altought is in the store

data() {
return {
payments: [],
destinations: [],
};
},
computed: {
codcli() {
return this.$store.getters.codcli;
},
total() {
return this.$store.getters.orderTotal;
}
},
methods: {
setData(payments, destinations) {
this.payments = payments;
this.destinations = destinations;
}
},
beforeRouteEnter(to, from, next) {
axios
.all([
axios.get(`/api/payments/${this.codcli}/${this.total}`),
axios.get(`/api/getcustomerdestinations/${this.codcli}`)
])
.then(
axios.spread((payments, destinations) => {
next(vm => vm.setData(payments.data, destinations.data));
console.log(payments.data, destinations.data);
})
.catch(error=> console.log(error))
);
}

what’s going on here? what i mess? cant understand because the getters of vuex works

Solution :

The component’s instance has not been created yet when
beforeRouteEnter is executed and that is why you don’t have access to
this.

Taken from the official docs:

beforeRouteEnter (to, from, next) {
// called before the route that renders this component is confirmed.
// does NOT have access to `this` component instance,
// because it has not been created yet when this guard is called!
},

One possible solution to this is by importing the main store file in this component and using it directly for accessing the getters instead instead of using the computed properties.

Assuming that this component and the store file exists in the same root folder level:

import store from “./store”;

And access the getters like this:

beforeRouteEnter (to, from, next) {
const codcli = store.getters.codcli;
const total = store.getters.orderTotal;
axios
.all([
axios.get(`/api/payments/${codcli}/${total}`),
axios.get(`/api/getcustomerdestinations/${codcli}`)
])
.then(
axios.spread((payments, destinations) => {
next(vm => vm.setData(payments.data, destinations.data));
console.log(payments.data, destinations.data);
})
.catch(error=> console.log(error))
);
},