can't access vue resource inside action vuex

Question

hey guys i am trying to do a request inside my action on the vuex side, and i get this error:

Cannot read property '$http' of undefined

i set my vue-resource this way inside my main.js file:

import Vue from 'vue'
import VueResource from 'vue-resource'
import VueRouter from 'vue-router'
import App from './App.vue'
import {routes} from './routes';
import {store} from './store/store';
import VModal from 'vue-js-modal'

Vue.use(VModal)
Vue.use(VueResource);
Vue.use(VueRouter);

const router = new VueRouter({
  routes
});

new Vue({
  el: '#app',
  store,
  router,
  render: h => h(App)
})

then on the store:

addStyle(state,newStyleObj) {
    console.log(newStyleObj);
    var vm = this;
    this.$http.post('http://localhost:16339/api/Styles/PostStyle/', newStyleObj)
        .then(response => {
            state.tableStyles = response.body;
            console.log(state.tableStyles)
            console.log(response.body)
        }, error => {
            console.log(error);
        });
}

any help?

someone sugested me to do it like this, because actions are assync — Filipe Costa, Aug 11 '17 at 11:02
I tried the same last night and got error messages that forced me to do the async fetching in actions which trigger mutations. You cannot do async operations in mutations. — Reiner, Aug 11 '17 at 11:04
Here is the same question with proper answers https://stackoverflow.com/questions/42560318/how-to-use-vue-resource-http-and-vue-router-route-in-a-vuex-store — Reiner, Aug 11 '17 at 11:24

score 11 · Answer 1 · edited Jan 14 '19 at 13:32

11

import axios from 'axios'
import Vue from 'vue'
import Vuex from 'vuex'

const axiosInstance = axios.create({
    baseURL: '',
    withCredentials: true,
})

Vue.prototype.$axios = axiosInstance
Vuex.Store.prototype.$axios = axiosInstance

This works for me.

Now you can access via this.$axios in Vue and Vuex.

edited Jan 14 '19 at 13:32

Felipe Augusto

7,733
10
39
73

answered Jan 14 '19 at 12:33

Fernando Saldaña

121
1
5

score 6 · Answer 2 · answered Aug 06 '19 at 08:53

6

You can access Vue instance from the store using this._vm.

this._vm.$http.post()

answered Aug 06 '19 at 08:53

NaN

1,955
13
16

Reiner · Answer 3 · 2017-08-11T11:36:31.267

1

Here is a proper explanation of the problem that $http is not accessible within vuex https://stackoverflow.com/a/42571288/6355502

The state can only be altered in mutations. NOT in actions. Just commit a mutation from inside of the action to alter the state.

I tried the same last night and got error messages that forced me to do the async fetching in actions which trigger mutations. You cannot do async operations in mutations and you cannot alter the state in actions, so you have to split the code.

// in actions
addStyle ({ commit, state }, newStyleObj) {
    console.log(newStyleObj);
    var vm = this;
    this.$http.post('http://localhost:16339/api/Styles/PostStyle/', newStyleObj)
        .then(response => {
            commit("setTableStyles", response.body);
            console.log(state.tableStyles)
            console.log(response.body)
        }, error => {
            console.log(error);
        });
}

// in mutations
setTableStyles(state, payload){
state.tableStyles = payload; // or state.tableStyles.push(...payload) if tableStyles is an Array 
}

edited Aug 11 '17 at 11:36

answered Aug 11 '17 at 11:03

Reiner

1,621
1
16
22

so where i put my request? – Filipe Costa Aug 11 '17 at 11:08
1

on the component side, then it should call the mutation that calls the action? – Filipe Costa Aug 11 '17 at 11:08
can you make a clean example of how you do the thing i am trying to? – Filipe Costa Aug 11 '17 at 11:11
1

your solution doesn't change my issue, i can't access vue-resource, that is my problem – Filipe Costa Aug 11 '17 at 11:12
The example is not perfect. Please look at the vuex docu for the proper mutation calling from into an action. – Reiner Aug 11 '17 at 11:14
i say it again, it has nothing to do with the mutation calling inside action, it has to do with vue-resource, i can't access this.$http – Filipe Costa Aug 11 '17 at 11:16
There is no `this.$http` inside the vuex-file. The `this` variable in vuex functions does not have the `$http` attribiute. If that is your problem you can solve it through requesting the data inside of a component and call the mutation from there. – Reiner Aug 11 '17 at 11:17
exactly, is there no way to have access to it inside the vuex file? – Filipe Costa Aug 11 '17 at 11:19
Maybe you can send the `$http` object as a payload property. Here is a complex answer https://stackoverflow.com/a/42571288/6355502 – Reiner Aug 11 '17 at 11:21

score 1 · Answer 4 · edited Jun 09 '18 at 16:23

1

Outside vue instance (store in this case) use Vue.http (without the dollar sign), inside instance use this.$http.

You can find more on github.

edited Jun 09 '18 at 16:23

Narendra Jadhav

10,052
15
33
44

answered Jun 09 '18 at 14:25

gardan

11
2

Or this._vm.$http.get... in any vuex action which avoids having to import the Vue instance in every time – D Durham Jul 30 '18 at 15:02

score 0 · Answer 5 · answered Apr 16 '19 at 20:31

access to axios with Vue.prototype.$http

login({commit}, loginFormData) {
            return new Promise((resolve, reject) => {
                commit('auth_request');
                Vue.prototype.$http({url: '/user/login', data: loginFormData, method: 'POST'})
                    .then(resp => {
                        const token = resp.data.data.token;
                        const user = resp.data.data.profile;
                        localStorage.setItem('token', token);
                        localStorage.setItem('user', JSON.stringify(user));
                        Vue.prototype.$http.defaults.headers['Authorization'] = 'Bearer ' + token;
                        this.state.user = JSON.parse(localStorage.getItem('user')) || '';
                        this.state.token = localStorage.getItem('token') || '';
                        commit('auth_success', {token, user});
                        resolve(resp)
                    })
                    .catch(err => {
                        commit('auth_error');
                        localStorage.removeItem('token');
                        localStorage.removeItem('user');
                        reject(err)
                    })
            })
        },

score 0 · Answer 6 · answered Feb 26 '20 at 14:14

0

Try Accessing vue Properties by this way this._vm.$yourDesiredPropertyName For example this._vm.$http etc It worked for me . You can access all the properties which are properly registered to vue instance

answered Feb 26 '20 at 14:14

Muhammad abdullah Qamar

43
2
4

can't access vue resource inside action vuex

6 Answers6