关于vue.js：Vuex，Axios变量未定义

Vuex, Axios variable is undefined

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

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请求地址中未定义。

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

但是，我不明白为什么api是不确定的。除此之外，请注意data回收，更像是这样：

1
2
3
4
5

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

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

1	export default"my_api_key";