vuex Store中无法访问axios答案

【问题标题】：Can't access axios in vuex Storevuex Store中无法访问axios
【发布时间】：2019-12-06 14:20:04
【问题描述】：

这是我的 store.js 代码：

import Vue from 'vue';
import Vuex from 'vuex';
import axios from 'axios/dist/axios';
import VueAxios from 'vue-axios'

const api = axios.create({
  baseURL: 'mybase.com',
  timeout: 2000,
});

Vue.use(VueAxios, api)
Vue.use(Vuex);
export default new Vuex.Store({
  strict: process.env.NODE_ENV !== 'production',
  state: {
    name: null,
    YOB: null,
    gender: null,
    city: null,
    daily_goal: null,
    balance: null,
    today_video_count: 17,
    video_credit: 5,
  },
  mutations: {
    updateDailyGoal(state, value) {
      state.daily_goal = value;
    },
    addVideoCredit(state) {
      state.balance += state.video_credit;
    },
    reduceDonation(state, amount) {
      state.balance -= amount;
    },
    setVideoCount(state, count) {
      state.today_video_count = count;
    },
    initialize(state, profile) {
      state.name = profile.name;
      state.YOB = profile.YOB;
      state.gender = profile.gender;
      state.city = profile.city;
      state.daily_goal = profile.daily_goal;
      state.balance = profile.balance;
    },
  },
  actions: {
    submitVideoView({commit}, payload) {
      this.$http.post('/vid');
      commit('addVideoCredit');
    },
    setDailyGoal({commit}, value) {
      this.$http.post('/account/daily-goal', {daily_goal: value});
      commit('updateDailyGoal', value);
    },
    init({commit}) {
      this.$http.get('/account/profile').then(response => {
        commit('initialize', response);
      });
      this.$http.get('/account/vid-view').then(response => {
        commit('setVideoCount', response);
      });
    },
  },
  created() {
    dispatch('init');
  },
});

但它给我的错误是 undefined 没有 post 属性，这意味着 this.$http 没有定义。我怎样才能解决这个问题？这也是我的 main.js：

import Vue from "nativescript-vue";
import App from "./components/App";
import store from "./store";

new Vue({
  store,
  render: (h) => h("frame", [h(App)]),
}).$start();

任何有关如何改进此代码的 cmets 将不胜感激。我真的环顾四周，但找不到任何好的文档来告诉我如何正确设置它。请注意，我只希望在每个用户会话/启动应用程序开始时分派一次 init 操作。

【问题讨论】：

从 VUE-AXIOS 的文档中说你应该这样做： import Vue from 'vue' import axios from 'axios' import VueAxios from 'vue-axios' Vue.use(VueAxios, axios)
所以你的意思是我应该将 axios/dist/axios 更改为 axios？因为那没有帮助。
不，但也许是 Vue.use(VueAxios,axiox)。但我真的不明白为什么要使用 axios 包装器。我可以在没有任何 axios 包装器的情况下标记如何正确使用 axios 的答案。
我不坚持使用它。实际上我已经删除了它，但我创建的似乎不起作用。我也尝试将其移至 main.js 文件，但如果您可以发布一个答案，该答案也将初始化来自某些很棒的 api 的数据，我的数据不会被初始化

标签： javascript vue.js axios nativescript nativescript-vue

【解决方案1】：

我认为您不需要对简单的 HTTP 请求使用 Axios 包装器。您可以做的是在文件中导入 Axios 模块，然后直接通过 Axios 模块发出请求。如果需要，可以将其包装为数据适配器。

import axios from 'axios';
const baseUrl = process.env.BASE_URL || '/';
export default {


 get(url, options) {
    return axios.get(`${baseUrl}${url}`, options)
      .then(response => response.data);
  },
  post(url, body, options) {
    return axios.post(`${baseUrl}${url}`, body, options)
      .then(response => response.data);
  },
  update(url, body, options) {
    return axios.put(`${baseUrl}${url}`, body, options)
      .then(response => response.data);
  },
  delete(url, options) {
    return axios.delete(`${baseUrl}${url}`, options);
  },
}

例如将该文件命名为 EP/index.js 然后，在您的 vuex 中，您可以在下面导入该文件并使用这些功能，就是这样。

【讨论】：