将数据从状态传递到操作vuex

Question

我想将坐标(lat，lng(从一个州传递到另一个州，以通过坐标获得城市名称，但state.lat&state.lng在axios.geturl中不起作用，我做错了什么？

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
}
})

Answer 1

1. 首先：https://vuex.vuejs.org/guide/mutations.html#commit-带有效载荷

在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 params而不是字符串连接：

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