Vue 在vuex 的store中调用axios方法不成功

Question

import axios from 'axios'
Vue.prototype.$http = axios;

actions: {
    // 获取未读消息
    GetunderMessage({ commit }, loginToken) {
      const formData = new FormData();
      formData.append('token', loginToken);
      formData.append('app', '0');
      console.log(formData);
      this.$http.post('http://192.168.16.221:8090/member_api/unreadMessage', formData).then(response => {
        var res = response.data.data;
        console.log(res);
        commit('SET_unreadMessage', res.length);
      }).catch(error => {
        console.log(error);
      });
    }
  }

提示: Cannot read property 'post' of undefined

Answer 1

this.$http
实在app.vue里挂载的axios，
在这里你要用axios

Answer 2

在 这里 this的指向应该是 Store,应该在顶部单独引入 axios后不要在将 axios继承到vue原型上了

import axios from 'axios'
...
...

actions: {
    // 获取未读消息
    GetunderMessage({ commit }, loginToken) {
      const formData = new FormData();
      formData.append('token', loginToken);
      formData.append('app', '0');
      console.log(formData);
      axios.post('http://192.168.16.221:8090/member_api/unreadMessage', formData).then(response => {
        var res = response.data.data;
        console.log(res);
        commit('SET_unreadMessage', res.length);
      }).catch(error => {
        console.log(error);
      });
    }
  }

希望能帮助到你

Answer 3

给一个标准答案,望采纳：

import Vue from 'vue'
// 这里直接引入Vue这个包
...
...

actions: {
    // 获取未读消息
    GetunderMessage({ commit }, loginToken) {
      const formData = new FormData();
      formData.append('token', loginToken);
      formData.append('app', '0');
      console.log(formData);
      // 因为之前已经实例化了，所以这里调用返回的是挂载好`$http`方法的Vue实例
      Vue.$http.post('http://192.168.16.221:8090/member_api/unreadMessage', formData).then(response => {
        var res = response.data.data;
        console.log(res);
        commit('SET_unreadMessage', res.length);
      }).catch(error => {
        console.log(error);
      });
    }
  }

Answer 4

this指向不对，这里并不是组件中，this并没有继承vue对象的方法

Answer 5

this的指向不对的

axios.post()

Answer 6

两段代码在两个文件吗, 如果你第一段代码将单独写了一个全局组件的或别忘记在main.js通过Vue.use(xx)调用, 然后在第二段代码中就可以Vue.$http.post, 这有个框架挺好的, 你可以参照一下N3-admin

Answer 7

可以在你的入口文件中把axios定义为全局变量使用，这样就不用重复的在每个vuex模块中重复导入vue或者axios了，如果你使用的是vue-cli创建的工程，直接在main.js里添加如下代码：

window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

在vuex中就可以直接使用以下方式直接调用axios了

axios.post()

Answer 8

只需修改store.js文件;

在store.js中：
import Vue from 'vue'
let vm = new Vue({});
vm.$http.post