Vue-cookie integration with Vuex

antonyhaman commented 4 years ago

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 commented 4 years ago

@kotvertolet did you find any solutions ?

Tonykaynoni commented 4 years ago

@kotvertolet did you find any solutions ?

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

ramsesgarate commented 4 years ago

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 commented 4 years ago

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.

alfhen / vue-cookie

Vue-cookie integration with Vuex #52