علیرضا حمید
5 سال پیش توسط علیرضا حمید مطرح شد
2 پاسخ

عملیات کال کردن api در یک فایل جدا js و تغییر استیت vuex

سلام وقت بخیر
من میخوام عملیات کال کردن api رو با استفاده از axios درون یک کلاس و فایل جدا بنویسم و از همون فایل بشه state که توی فایل store هست رو عوض کنه و دسترسی داشته باشه .
من از vuex استفاده میکنم .
فقط میخوام این اکشن ها ()getCurrentWeatherData() , getDailyWeatherData بره توی یک کلاس و فایل جدا که بتونن api رو کال کنن و مقدار state توی store رو تغییر بدن

import Vue from "vue";
import Vuex from "vuex";
import plugins from "../../plugins/plugins";
import Axios from "axios";

Vue.use(Vuex);
const store = new Vuex.Store({
  strict: true,
  state: {
    city: JSON.parse(window.localStorage.getItem("location") || " "),
    currentWeatherData: [],
    dailyWeatherData: []
  },
  getters: {
    getIcon(state) {
      let icon = state.currentWeatherData.weather.icon;
      return "https://www.weatherbit.io/static/img/icons/" + icon + ".png";
    }
  },

  mutations: {
    updateCity(state, city) {
      state.city = city;
    },

    setCurrentWeatherData(state, currentWeatherData) {
      state.currentWeatherData = currentWeatherData;
    },
    setDailyWeatherData(state, dailyWeatherData) {
      state.dailyWeatherData = dailyWeatherData;
    }
  },
  actions: {
    getCurrentWeatherData({
      commit
    }) {
      let url = "https://api.weatherbit.io/v2.0/current",
        key = "key=d278d8fd45ac4a779a5949bd6ee4f37e";
      Axios.get(url + "?" + key + "&" + "city=" + this.state.city)
        .then(res => {
          commit("setCurrentWeatherData", res.data.data[0]);
        })
        .catch(err => {
          throw err;
        });
    },
    getDailyWeatherData({
      commit
    }) {
      let url = "https://api.weatherbit.io/v2.0/forecast/daily",
        key = "key=d278d8fd45ac4a779a5949bd6ee4f37e",
        days = "days=" + 3;
      Axios.get(url + "?" + key + "&" + days + "&" + "city=" + this.state.city)
        .then(res => {
          commit("setDailyWeatherData", res.data.data);
        })
        .catch(err => {
          throw err;
        });
    }
  },
  plugins
});
export default store;

ثبت پرسش جدید
حسام موسوی
تخصص : طراح و برنامه نویس
@hesammousavi 5 سال پیش مطرح شد
0

به هیچ وجه و هیچ وقت داخل vuex نیاید درخواست http بزنید
در بدنه برنامه باید این درخواست‌ها رو بزنید و بعد از دریافت درخواست بیاید مثلا commit کنید
این کاری که شما انجام دادید کاملا اشتباه هستش


علیرضا حمید
تخصص : Front-End Developer
@alirezahamid 5 سال پیش مطرح شد
0

@hesammousavi

اره دقیقا منم همین اشتباه رو حس کردم .
میخام یه فایل داشته باشم به اسم api.js مثلا
این عملیات get کردن دیتا از axios رو هندل کنم و دیتا رو بریزم تو state که توی فایل store هست


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام