Can I use this in Vuex store?

Question

I create project with vue-cookies and vue-resource, I try to access to the cookies with this.$cookies.get('my-cookie') and request my API with this.$http.post('URL'). Tut the store can't access to this.

My action in store.js :

checkCookies: () => {
    if (this.$cookies.get('test') === null) {
        console.log('vide')
        //envoyer sur la page de connexion
    } else {
        console.log('pas vide')
        this.$http.post('URL', {

        })
    }
}

How I call my action (it's method call on click) :

test() {
        return this.$store.dispatch('checkCookies')
      }

How I my test function is called:

<v-btn @click="test">cookies!</v-btn>

I have this error when I run checkCookies :

Error in v-on handler: "TypeError: _this is undefined"

I would use this normally in my store, I know that I can import each packages one by one to use them but, I want to know if there is way to use this in vuex to ?

Answer 1

this.$cookies and this.$http work within a component method because those functions are added to Vue.prototype by their respective plugins.

These are just convenience methods anyway; it seems these plugins install equivalent methods on Vue directly:

this.$http    -> Vue.http
this.$cookies -> Vue.$cookies

If you really want to be able to do this.$http within a Vuex action, then you need to assign the methods to the store:

const store = new Vuex.Store({ ... })

// Make sure you have registered the Vue plugins by this point
store.$http = Vue.http
store.$cookies = Vue.$cookies