[前端][vue]异步操作中无法修改state的属性

mutation 必须同步，任何异步只能出现在 action 里。

缘起：

 // 更新操作
      ClueLibApi.reportClueRecord(param)
        .then(rs => {
          clue.clueState = 1;
         
          this.$emit("reStatistics", "");
          this.$message({
            type: "success",
            message: "成功"
          });
        })
        .catch(e => {
          console.error(e);
          this.$alert(e || "出错");
        })
        .finally(() => this.setLoading(false));
    },

在

clue.clueState = 1;

这一行中，因为clue是来自一个datalist中的数据，在el-table中被循环获取，然后在clue对象中，cluestate是一个属性，但是这些都是vuex的属性。

而这上面的代码中，是异步进行的，异步进行中，不能进行vuex中属性的更改

解决办法：

在vuex中（xx-store.js）

定义方法：

setClueState(state,clueId){

let clueReportStatus = state.clueList.filter((c)=>c.clueId === clueId)

if(clueReportStatus && clueReportStatus.length){

clueReportStatus[0].clueState = 1;

}

}

然后在上面代码把，把clue.clueState = 1;

替换为：

this.setClueState(clue.id);

 

ps: 别忘了增加

methods: {

...mapActions(STORE_NAME_SPACE_CLUE_LIB, ["loadData"]),

...mapMutations(STORE_NAME_SPACE_CLUE_LIB, [

"其它方法",

"setClueState"

]),

其它解析：

this.setClueState(clue.id);中的this,就是把通过mapMutations，把方法映射为本文件使用，

关于获取list中某个符合条件的数据对象，使用lambda表达式