Unable to retrieve Vue resource within Vuex action

Question

Unable to retrieve Vue resource within Vuex action

Hello everyone, I'm currently facing an issue while trying to make a request within my action on the Vuex side, and I keep getting this error:

Cannot read property '$http' of undefined

I have configured my vue-resource in the following manner 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, within 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);
        });
}

Could anyone provide assistance with this issue?

javascript vue.js vuejs2 vuex vue-resource

Answer 1

Answer №1

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

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

Vue.prototype.$customAxios = customAxios
Vuex.Store.prototype.$customAxios = customAxios

This solution has been effective for me.

You can now utilize this.$customAxios in your Vue and Vuex components.

Answer 2

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

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

Vue.prototype.$customAxios = customAxios
Vuex.Store.prototype.$customAxios = customAxios

This solution has been effective for me.

You can now utilize this.$customAxios in your Vue and Vuex components.

Answer 3

Answer №2

To interact with the Vue instance within the store, you can simply use this._vm.

this._vm.$http.post()

Answer 4

To interact with the Vue instance within the store, you can simply use this._vm.

this._vm.$http.post()

Answer 5

Answer №3

One issue that frequently arises is the unavailability of $http within vuex. More information can be found at

It's important to note that state modifications should only occur in mutations, not actions. If you need to change the state from an action, simply commit a mutation to make the necessary alteration.

I encountered this same problem last night and received error messages indicating that async fetching should be done in actions triggering mutations. Async operations cannot be performed in mutations, and state alterations should not take place in actions, hence the need to separate the code accordingly.

// Example 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);
        });
}

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

Answer 6

One issue that frequently arises is the unavailability of $http within vuex. More information can be found at

It's important to note that state modifications should only occur in mutations, not actions. If you need to change the state from an action, simply commit a mutation to make the necessary alteration.

I encountered this same problem last night and received error messages indicating that async fetching should be done in actions triggering mutations. Async operations cannot be performed in mutations, and state alterations should not take place in actions, hence the need to separate the code accordingly.

// Example 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);
        });
}

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

Answer 7

Answer №4

When working outside of a Vue instance, such as with the `store` variable, make sure to use `Vue.http` (without the dollar sign). However, when inside an instance, you should use `this.$http` instead.

For more information, check out the Vue Resource documentation on GitHub.

Answer 8

When working outside of a Vue instance, such as with the `store` variable, make sure to use `Vue.http` (without the dollar sign). However, when inside an instance, you should use `this.$http` instead.

For more information, check out the Vue Resource documentation on GitHub.

Answer 9

Answer №5

integration of axios using Vue.prototype.$http

handleLogin({commit}, loginData) {
            return new Promise((resolve, reject) => {
                commit('auth_request');
                Vue.prototype.$http({url: '/user/login', data: loginData, method: 'POST'})
                    .then(response => {
                        const token = response.data.data.token;
                        const user = response.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(response)
                    })
                    .catch(error => {
                        commit('auth_error');
                        localStorage.removeItem('token');
                        localStorage.removeItem('user');
                        reject(error)
                    })
            })
        },

Answer 10

integration of axios using Vue.prototype.$http

handleLogin({commit}, loginData) {
            return new Promise((resolve, reject) => {
                commit('auth_request');
                Vue.prototype.$http({url: '/user/login', data: loginData, method: 'POST'})
                    .then(response => {
                        const token = response.data.data.token;
                        const user = response.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(response)
                    })
                    .catch(error => {
                        commit('auth_error');
                        localStorage.removeItem('token');
                        localStorage.removeItem('user');
                        reject(error)
                    })
            })
        },

Answer 11

Answer №6

One way to access vue Properties is by using this method:

this._vm.$yourDesiredPropertyName

. An example of this would be this._vm.$http. I found success with this approach. You will be able to access all properties that have been properly registered to the vue instance.

Answer 12

One way to access vue Properties is by using this method:

this._vm.$yourDesiredPropertyName

. An example of this would be this._vm.$http. I found success with this approach. You will be able to access all properties that have been properly registered to the vue instance.

Unable to retrieve Vue resource within Vuex action

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Ways to retrieve information from a different website's URL?

The button transforms once the user submits the form

I am confused as to why my function is selecting all the checkboxes when it should only be selecting one

What is the most effective method for utilizing JSON as a database?

NuxtJS project enhanced with MdBootstrap features

Shift the element upwards instead of scrolling down the page

Steps for incorporating a smooth transition effect into a modal popup as its height dynamically increases

The Bootstrap modal fails to appear when closed

No output was generated by the emitted Typescript on Trading View

Is there a way to switch the video source when a particular h3 tag is clicked?

refreshing a javascript function without the need for reloading

What is the best way to make one div show that another div is being toggled in a slideshow display?

Determine future dates based on selected date and time

Challenges in Producing a Dynamic Table from a Pre-existing Table

Add new items to an array, with the most recent item being the last

Personalize the position of the v-select drop-down menu

Incorporating the power of moment.js into your Vue.js

Creating reusable components in Vue.js can enhance code reusability and make development

The library "vue-property-decorator" (v10.X) is causing issues with resolving in Webpack despite being successfully installed

Issue with displaying errors in vee-validate when using Vue.js Axios (More details provided)