项目场景：

提示：这里简述项目相关背景：

将根据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调用

created() {this.$store.dispatch('getHTInfo',this.segmentId);},

4：页面引入mapState语法糖

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)}}},