Vue-cookie integration with Vuex

[antonyhaman]

Hi there! I'm totally new with Vue and front-end in general (I'm backend java developer :smile:) therefore I might ask dumb questions, but I'm trying to build a simple Vue app with Vuex and cookie as security token. What I'm currently have: main.js:

...
import Vue from "vue";
import vueCookie from "vue-cookies";
...

Vue.component(...);

Vue.use(vueCookie);
new Vue({
  el: "#app",
  router,
  store,
  template: "<App/>",
  components: {App}
}); 

auth.js:

import Vue from "vue";
...

const state = {
  token: this.$cookie.get('token') || "",
  ...
};

/// other auth code

When I run my app I get 'Cannot read property '$cookie' of undefined' at Vue.prototype.$cookie.get('token') line. What I'm doint wrong?

[abrantes01]

@kotvertolet did you find any solutions ?

[Tonykaynoni]

@kotvertolet did you find any solutions ?

Use Vue.cookie.get('token') instead

[ramsesgarate]

Vuex doesn't reference the vue instance, to use the instance in vuex you have to use this._vm, so it should work like:

const state = {
  token: this._vm.$cookie.get('token') || "",
  ...
};

I hope this helps you

[KashyapFero]

If you have declared your import like this

import VueCookie from 'vue-cookie' Vue.use(VueCookie)

you can refer to the global variable with "VueCookie.set()" from anywhere. Even in the Vuex store.