无法访问动作vuex中的vue资源

Question

嘿，伙计们，我试图在我的行动中做一个请求，我得到了一个错误：

Cannot read property '$http' of undefined

我以这种方式在我的main.js文件中设置了vue资源：

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

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

状态只有在突变时才能改变。不是在行动上。只需从动作的内部提交一个突变来改变状态。

我昨晚也尝试了同样的方法，得到了一些错误消息，这些错误信息迫使我在触发突变的动作中进行异步获取。不能在突变中执行异步操作，也不能在操作中更改状态，因此必须拆分代码。

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