Question

下面的方法调用一个天气 API，因为它需要在组件加载之前获取 API 数据，所以它被放置在一个创建的生命周期钩子中。

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 获取经纬度，即 $store.getters.getLatitude 和 $store.getters.getLongitude。在方法内部使用时（重新加载页面后），getter 似乎没有返回数据。在计算属性中使用时，getter 似乎可以工作（无论页面重新加载如何）。如何访问方法中的 getter 数据？

Answer 1

在这种情况下，如下的 watch 属性似乎可以解决问题，

  watch: {
    latLong: {
      handler(value) {
        if (value.lat && value.long) {
          this.getWeather();
        }
      },
      immediate: true,
    },
  },

无法在方法内部访问Vuex getter

1 个答案: