Javascript 在组件中使用Vuex getter并执行操作'；s axios数据

当我发出get请求时，Vuex操作和变异会被更新。但是，getter和state不会同时更新。当我发出第二个get请求时，它会得到更新

Vuex商店

MyTable.vue

<template>
  <div>
    <b-button @click="this.run"></b-button>
  </div>
</template>
<script>
import {table_informations} from "../../../store/file_informations/table_informations";
export default {
  name: "table",
  methods:{
    run(){
      this.$store.dispatch('table_value')
      let data =this.$store.getters.Gtable_Value
      console.log(data)
    }
  },
}
</script>

从“../../store/file_informations/table_informations”导入{table_informations}”；
导出默认值{
名称：“表格”，
方法：{
运行（）{
此.$store.dispatch（'table_value'））
让data=this.$store.getters.Gtable_值
console.log（数据）
}
},
}

---

当我按下按钮时，操作和更改具有最新数据，但是，状态和收件人没有最新数据。当我第二次提出请求时，它有最新的数据。我的行动、突变或get请求没有问题。除了我的Vuex存储，一切正常。

在将变量设置为getter值之前，您不会等待异步请求完成。您应该等待承诺得到解决，但最好使用计算的getter。如果加载getter后不需要执行任何其他操作，那么这种模式会更好

从“vuex”导入{mapGetters}；//制图员
从“../../store/file_informations/table_informations”导入{table_informations}”；
导出默认值{
名称：“表格”，
计算：{
…MapGetter（['Gtable_Value']）//创建与Vuex getter同步的计算
},
方法：{
运行（）{
此.$store.dispatch（'table_value'））
}
},
}

---

或者，要按计划的方式执行，请从操作返回http承诺，并在方法中等待它：

贮藏

操作：{
表_值（{commit}）{
//返回http承诺
返回api.allshowdata（）.then（res=>res.data）。然后（items=>{
返回提交（'Mtable_值'，项）
})
},
},

MyTable.vue

<template>
  <div>
    <b-button @click="this.run"></b-button>
  </div>
</template>
<script>
import {table_informations} from "../../../store/file_informations/table_informations";
export default {
  name: "table",
  methods:{
    run(){
      this.$store.dispatch('table_value')
      let data =this.$store.getters.Gtable_Value
      console.log(data)
    }
  },
}
</script>

从“../../../store/file\u informations/table\u informations”导入{table\u informations}”；
导出默认值{
名称：“表格”，
方法：{
异步运行（）{//async关键字
等待这个。$store.dispatch（'table_value'）//等待承诺
让data=this.$store.getters.Gtable_值
console.log（数据）
}
},
}