项目场景：
提示：这里简述项目相关背景：
将根据segmentId查出来的合同信息托管到vuex中，让每个人都可以获取到合同信息
描述以及问题点
1：调用vuex异步函数的语法是
this.$store.dispatch('actions方法名',值)
2：在computed（计算属性）中使用mapState语法糖
computed: {
...mapState({
contractCode:state => state.contractInfo.contractCode,
})
},
3：调用成功后有可能读取不到值
首先我们要明白发送请求属于异步任务中的微任务，所以在你读取的时候，有可能还没有赋值成功，所以，你需要监听这个值，如下：
watch: {
// 监听
"contractCode":function(val){
if(val!=""||val!=null||val!=undefined){
console.log("vuex异步调用后获取数据=========监听",this.contractCode)
}
}
},
事件循环机制 注：
- 整体的script(作为第一个宏任务)开始执行的时候，会把所有代码分为两部分：“同步任务”、“异步任务”；
- 同步任务会直接进入主线程依次执行；
- 异步任务会再分为宏任务(进入宏任务队列) 和 微任务(进入微任务队列)。
- 当主线程内的任务执行完毕（主线程为空时），会检查微任务的任务队列，如果有任务，就进入主线程全部执行，如果没有就从宏任务队列读取下一个宏任务执行；
- 每执行完一个宏任务就清空一次微任务队列，此过程会不断重复，这就是Event Loop；
实例：
提示：这里填写该问题的具体解决方案：
1：在store中新建一个js文件
/*
*@Author: FangbinGuo
*@Date:2023-09-11 10:19:56
*@Description:
*/
// 合同信息的接口
import {getHTMC,} from "@/api/payment/projectInspect/payoff";
const state= {
contractCode:"",
contractName:"",
}
const mutations= {
SET_ContractCode: (state, contractCode) => {
state.contractCode = contractCode
},
SET_ContractName: (state, contractName) => {
state.contractName = contractName
},
}
const actions = {
getHTInfo({ commit }, segmentId) {
getHTMC({
segmentId:segmentId
}).then(res=>{
// console.log("根据标段id获取合同信息========",res)
commit('SET_ContractCode', res.data.contractCode);
commit('SET_ContractName', res.data.contractName);
}).catch(err=>{
console.log(err)
})
}
}
export default{
state,
mutations,
actions,
}
2：在store的index文件中引入后抛出
import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
import contractInfo from './modules/contractInfo'
Vue.use(Vuex)
const store = new Vuex.Store({
modules: {
contractInfo,
},
getters
})
export default store
3：页面dispatch调用
文章来源：https://www.toymoban.com/news/detail-712673.html
created() {
this.$store.dispatch('getHTInfo',this.segmentId);
},4：页面引入mapState语法糖
文章来源地址https://www.toymoban.com/news/detail-712673.html
5：在计算属性中使用mapState语法糖
computed: {
...mapState({
contractCode:state => state.contractInfo.contractCode,
})
},6：监听这个变量
watch: {
// 监听
"contractCode":function(val){
if(val!=""||val!=null||val!=undefined){
console.log("vuex异步调用后获取数据=========监听",this.contractCode)
}
}
},到了这里，关于vuex中actions异步调用以及读取值的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
