Question

import Vue from "vue";
import Vuex from "vuex";
import axios from "axios";
import api from "./api_key";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    data: "",
    location: "New York"
  },
  mutations: {
    GET_DATA(state, data) {
      state.data = data;
    }
  },
  actions: {
    getData({ commit }, state) {
      axios
       .get(
          `https://api.openweathermap.org/data/2.5/forecast/daily?q=${
            state.location
          }&appid=${api}&units=metric&cnt=5`
        )
        .then(data => {
          commit("GET_DATA", data);
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  },
  getters: {
    data(state) {
      return state.data;
    }
  }
});

我正在使用Vue Web应用程序。对于状态管理，我决定使用vuex。我的“位置”和“ api”变量在我的Axios请求地址中未定义。

Answer 1

要访问操作中的当前状态，您将state声明放到了getData中。应该是这样的：getData({ commit, state })。

但是，我不明白为什么api未定义。除此之外，请注意data的恢复，更像是这样：

.then((response) => {
     if (response.data) {
         commit("GET_DATA", response.data);
     }
}

编辑：您的api_key.js文件应包含以下内容，以便使用您正在使用的导入：

export default "my_api_key";

Vuex，Axios变量未定义

1 个答案: