1.在vuex中做异步请求时,需要用到Action,Action 通过 store.dispatch
方法触发,在actions中请求数据,请求回来的数据通过commit调用Mutations中的方法,将取出来的数据设置给state。如图
代码:
import axios from "axios"
export default {
state:{
curInx:0,
name: '小王',
age: '18',
data:[],
},
mutations:{
// setCurInx(state,index){
// console.log(index)
// state.curInx = index
// }
setCurInx(state,payload){
let {index,text} = payload;
console.log(index,text)
state.curInx = index
},
setData(state,data){
state.data = data
}
},
getters:{
getMyInfo(state){
return `我的名字是${state.name},我今年${state.age}岁`;
}
},
actions: {
getData(ctx,payload){
const {key,testType} = payload;
axios(
`/api/query?key=${key}&testType=${testType}`
).then((res)=>{
console.log(res)
ctxstore.commit('setData', res.data.result)
})
}
}
}
<template>
<div></div>
</template>
<script>
export default{
name: 'MyPart2',
data(){
return{
}
},
mounted(){
this.$store.dispatch('getData',{
key:'JYHE_APPKEY',
testType: 'rand'
})
}
}
</script>
<style scoped>
</style>