Не удается получить доступ к axios в магазине vuex

Вот мой код 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();

Любые комментарии о том, как улучшить этот код, будут высоко оценены. Я действительно так много огляделся, но не смог найти ни одного хорошего документа, который рассказал бы мне, как правильно это настроить. Обратите внимание, что я хочу, чтобы действие инициализации отправлялось только один раз в начале каждого пользовательского сеанса/запуска приложения.

В документации VUE-AXIOS говорится, что вы должны делать так: импортировать Vue из «vue»;

arielb 29.07.2019 11:12

то есть вы имеете в виду, что я должен изменить axios/dist/axios на просто axios? потому что это не помогает.

yukashima huksay 29.07.2019 11:15

нет, но может быть это Vue.use(VueAxios,axiox). но я действительно не понимаю, зачем использовать оболочку axios. я могу пометить ответ, как правильно использовать axios без какой-либо оболочки axios.

arielb 29.07.2019 11:29

Я не настаиваю на его использовании. на самом деле я удалил это, но мой созданный, похоже, не работает. Я также пытался переместить его в файл main.js, но мои данные не инициализируются, если вы можете опубликовать ответ, который также инициализирует данные из какого-либо API, что было бы здорово.

yukashima huksay 29.07.2019 11:35
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
4
1 541
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я не думаю, что вам нужно использовать оболочку Axios только для простых HTTP-запросов. Что вы можете сделать, так это импортировать модуль 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 вы можете импортировать этот файл ниже и использовать эти функции, вот и все.

Другие вопросы по теме