Vue3 - 利用vuex调取异步接口数据(二)
使用vuex调接口同步数据到各个组件,并且组件中能获取到异步请求是什么时候完成的。利用Promise 和 axios组件中使用<script>import {onMounted} from 'vue'import {useStore} from 'vuex'export default{setup(){const store = useStore()onMounted(){const
·
使用vuex调接口同步数据到各个组件,并且组件中能获取到异步请求是什么时候完成的。
利用Promise 和 axios
组件中使用
<script>
import {onMounted} from 'vue'
import {useStore} from 'vuex'
export default{
setup(){
const store = useStore()
onMounted(){
const promise = store.dispatch("getHomeDataAction")
promise.then(res=>{
...
请求成功
}).catch(err=>{
...
请求失败
})
}
}
}
</script>
store 文件夹下 index.js文件在actions 里去请求数据
import {createStore} from 'vuex'
import axios from 'axios'
const store = createStore({
state(){
return{}
},
mutations:{
getHomeData(state,payload){
state.list = payload// 对应的去修改state数据就行了
}
},
actions:{
getHomeDataAction({commit}){
return new Promise((resolve,reject)=>{
axios.get("接口地址").then(res=>{
// 请求成功
commit("getHomeData",res.data.result)
// 如果是一个请求,更改多个state里面的数据,就调用mutations对应的修改方法~
resolve() // 通知组件,接口调用成功了
}).catch(err=>{
reject(err) // 通知组件,接口调用失败,并把失败原因传过去
})
})
}
}
})
export default store
更多推荐
已为社区贡献3条内容
所有评论(0)