我想通過坐標 (lat, lng) 從 state 到 action 以通過坐標獲取城市名稱，但是 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
}
})
uj5u.com熱心網友回復：
- 起初：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 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
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/352428.html
上一篇：是否可以將v-forprops傳遞給嵌入在html中的組件？插槽道具不起作用
下一篇：我如何讓按鈕隱藏未完成的任務