Vuex中将state的经纬度传入action发起axios请求不生效如何解决

问题原因 #

• 异步执行顺序错误：navigator.geolocation.getCurrentPosition 是回调型异步API，调用后不会阻塞后续代码运行。你在调用该方法后直接发起axios请求时，定位成功的回调还未触发，state.lat 和 state.lng 仍然是初始化的空字符串，因此URL参数拼接失效。
• Vuex状态修改不符合规范：Action 中不允许直接修改state的取值，所有state的变更必须通过提交Mutation完成，直接在定位回调中给state.lat、state.lng赋值属于违规操作，可能引发状态响应异常。

修复方案 #

1. 先补充修改经纬度的Mutation
2. 将回调式的定位API封装为Promise，用await等待定位完成拿到经纬度后，再发起axios请求
3. 所有state修改走Mutation提交

修复后代码 #

export default new Vuex.Store({
  state: {
    address: [],
    lat: '',
    lng: ''
  },
  mutations: {
    SET_ADDRESS: (state, address) => {
      state.address = address
    },
    // 补充经纬度的Mutation
    SET_LAT_LNG: (state, { lat, lng }) => {
      state.lat = lat
      state.lng = lng
    }
  },
  actions: {
   async GET_ADDRESS({commit, state}) {
     // 封装定位为Promise
     const position = await new Promise((resolve, reject) => {
       navigator.geolocation.getCurrentPosition(
         (pos) => resolve(pos),
         (err) => reject(err) // 可自行补充定位失败的处理逻辑
       )
     })
     // 提交Mutation修改经纬度
     const lat = position.coords.latitude
     const lng = position.coords.longitude
     commit('SET_LAT_LNG', { lat, lng })
     // 拿到经纬度后再发起请求
     const address = await axios.get(`https://api.opencagedata.com/geocode/v1/json?q=${lat}+${lng}&roadinfo=1&key=5032de2d86224227b1d1fbe12f6bf7`,{})
     commit('SET_ADDRESS', address.data.results);
     return address;
    },
  },
  getters: {
    ADDRESS: state => state.address
  }
})

内容的提问来源于stack exchange，提问作者Alexander