[前端][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表達式