vue.js - 无法在方法内访问 Vuex getter
问题描述
下面的方法调用一个天气 API,因为它需要在组件加载之前获取 API 数据,所以它被放置在一个created生命周期钩子中。
getWeather() {
const lat = this.$store.getters.getLatitude;
const long = this.$store.getters.getLatitude;
console.log('lat is ' + lat);
let url =
'http://api.openweathermap.org/data/2.5/weather?lat=' +
lat +
'&lon=' +
long +
'&units=metric&APPID=' +
process.env.VUE_APP_OPEN_WEATHER_API_KEY;
axios
.get(url)
.then((response) => {
this.currentTemp = response.data.main.temp + '°C';
this.minTemp = response.data.main.temp_min + '°C';
this.maxTemp = response.data.main.temp_max + '°C';
this.pressure = response.data.main.pressure + 'hPa';
this.humidity = response.data.main.humidity + '%';
this.wind = response.data.wind.speed + 'm/s';
})
.catch((error) => {
console.log(error);
});
},
},
created() {
this.getWeather();
},
Vuex商店
import Vue from 'vue';
import Vuex from 'vuex'
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
latitude: '',
longitude: '',
},
mutations: {
SET_LATITUDE(state, payload) {
state.latitude = payload
},
SET_LONGITUDE(state, payload) {
state.longitude = payload
}
},
actions: {
GET_DATA({ commit }) {
var self = this
.
.
.
// LOGIC TO GET USER DATA ( LAT AND LONG FROM DATABASE )
.
.
.
self.ddb_data = [...data.Items];
const latitude = self.ddb_data[0].user_meta_data.coordinates.latitude
const longitude = self.ddb_data[0].user_meta_data.coordinates.longitude
commit('SET_LATITUDE', latitude)
commit('SET_LONGITUDE', longitude)
}
});
}
});
});
}
} catch (e) {
console.log(e);
return;
}
},
},
},
getters: {
getLatitude(state) {
return state.latitude;
},
getLongitude(state) {
return state.longitude;
},
},
});
export default store;
问题在于从 vuex getter ie$store.getters.getLatitude
和$store.getters.getLongitude
. 在方法内部使用时,getter 似乎没有返回数据(页面重新加载后)。当在计算属性中使用时,getter 似乎可以工作(无论页面重新加载如何)。如何访问方法内的 getter 数据?
解决方案
在这种情况下,如下手表属性似乎可以解决问题,
watch: {
latLong: {
handler(value) {
if (value.lat && value.long) {
this.getWeather();
}
},
immediate: true,
},
},
推荐阅读
- python - 未定义计划名称
- oracle - oracle first_Value解析函数有什么用?
- bash - 如何设置切换键以在执行期间显示 shell 脚本输出?
- android - 有没有办法通过 adb 从 USB 连接的 android 设备连接到 docker 容器?
- javascript - 模拟模块中除一个功能之外的所有功能
- jenkins - 从 Jenkins 作业 DSL 脚本中访问 Jenkins 凭据绑定
- vue.js - nuxt.js:有没有办法在页面刷新时阻止对服务器的请求
- java - 映射异常:找不到具有逻辑名称的列
- swift - NSPopover 解雇不会将其从父级的presentedViewControllers(Xcode 11)中删除
- excel - VBA 保存到子文件夹