将数据从状态传递到动作 vuex答案

【问题标题】：pass data from state to actions vuex将数据从状态传递到动作 vuex
【发布时间】：2021-11-05 20:32:43
【问题描述】：

我希望将坐标（lat、lng）从一个状态传递到一个动作以通过坐标获取城市名称，但是 state.lat 和 state.lng 在 axios.get url 中不起作用，我做错了什么？

export default new Vuex.Store({
  state: {
    address: [],
    lat: '',
    lng: ''
  },
  mutations: {
    SET_ADDRESS: (state, address) => {
      state.address = address
    },
  },
  actions: {
   async GET_ADDRESS({commit, state}) {
     navigator.geolocation.getCurrentPosition(
         (position) => {
           state.lat = position.coords.latitude
           state.lng = position.coords.longitude
         },
     );
     const address = await axios.get(`https://api.opencagedata.com/geocode/v1/json?q=${state.lat}+${state.lng}&roadinfo=1&key=5032de2d86224227b1d1fbe12f6bf7`,{})
        commit('SET_ADDRESS', address.data.results);
        return address;
    },
  },
  getters: {
    ADDRESS: state => state.address
  }
})

【问题讨论】：

navigator.geolocation.getCurrentPosition 应该是异步的，因为它有一个回调。

标签： vue.js vuex

【解决方案1】：

起初： https://vuex.vuejs.org/guide/mutations.html#commit-with-payload

在 Vuex 存储中真正改变状态的唯一方法是提交突变。

所以第一个错误是改变状态：

   state.lat = position.coords.latitude
   state.lng = position.coords.longitude

第二，第一个参数传递给 navigator.geolocation.getCurrentPosition 是一个回调。在执行 axios 请求后可以（并且确实）调用它。所以你可以发送在该回调中请求。

    export const state = () => ({
      address: []
    });
    
    export const actions = {
      GET_ADDRESS({ commit }) {
        navigator.geolocation.getCurrentPosition(async (position) => {
          const { coords } = position;
    
          const address = await this.$axios.$get(
            `https://api.opencagedata.com/geocode/v1/json`,
            {
              params: {
                q: `${coords.latitude}+${coords.latitude}`,
                roadinfo: 1,
                key: "PUT YOU KEY HERE"
              }
            }
          );
    
          commit("SET_ADDRESS", address.results);
        });
      }
    };
    
    export const mutations = {
      SET_ADDRESS: (state, address) => {
        state.address = address;
      }
    };
    
    export const getters = {
      ADDRESS: (state) => state.address
    };

最好使用 axios 参数而不是字符串连接：

this.$axios.$get(
    `https://api.opencagedata.com/geocode/v1/json`,
    {
        params: {
        q: `${coords.latitude}+${coords.latitude}`,
        roadinfo: 1,
        key: "PUT YOU KEY HERE"
    }
);

填写您的 API 密钥并查看我的演示： https://codesandbox.io/s/questions-69858959-pass-data-from-state-to-actions-vuex-o0usb?file=/store/index.js

【讨论】：