在vuex中使用axios从API中获取数据的步骤如下:
npm install axios vuex --save
store.js
文件中:import axios from 'axios';
const store = new Vuex.Store({
state: {
data: null
},
mutations: {
setData(state, payload) {
state.data = payload;
}
},
actions: {
fetchData({ commit }) {
axios.get('API_URL')
.then(response => {
commit('setData', response.data);
})
.catch(error => {
console.log(error);
});
}
}
});
mapActions
将Vuex的fetchData
action映射到组件的方法中。例如,在组件的methods
中:import { mapActions } from 'vuex';
export default {
// ...
methods: {
...mapActions(['fetchData']),
getData() {
this.fetchData();
}
}
}
getData
方法即可触发API请求并将数据存储到Vuex的state中。例如,在组件的created
钩子函数中:export default {
// ...
created() {
this.getData();
}
}
这样,通过以上步骤,就可以在vuex中使用axios从API中获取数据了。获取到的数据将存储在Vuex的state中,可以在组件中通过this.$store.state.data
来访问。
领取专属 10元无门槛券
手把手带您无忧上云