vuex中actions异步调用以及读取值

项目场景：

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

将根据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)
      }
    }
  },