Question

嘿伙计们我想在vuex一侧的行动中做一个请求，我收到这个错误：

Cannot read property '$http' of undefined

我在main.js文件中设置我的vue-resource：

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)
})

然后在商店：

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

任何帮助？

Answer 1

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

这对我有用。

现在，您可以在Vue和Vuex中通过this.$axios进行访问。

Answer 2

您可以使用this._vm从商店访问Vue实例。

this._vm.$http.post()

Answer 3

以下是对vuex https://stackoverflow.com/a/42571288/6355502无法访问$http的问题的正确解释

状态只能在突变中改变。不在行动中。只需从动作内部提交一个变异来改变状态。

我昨晚尝试了相同的操作并收到了错误消息，这些消息迫使我在触发突变的操作中执行异步提取。您不能在突变中执行异步操作，也不能在操作中更改状态，因此必须拆分代码。

// 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 
}

Answer 4

外部vue实例（在这种情况下为store）使用Vue.http（不带美元符号），实例内部使用this.$http。

您可以在github上找到更多信息。

Answer 5

使用Vue.prototype.$http

访问axios

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)
                    })
            })
        },

Answer 6

尝试通过这种方式this._vm.$yourDesiredPropertyName访问vue属性例如this._vm.$http等它对我有用。您可以访问已正确注册到vue实例的所有属性

无法访问action vuex中的vue资源

6 个答案: