使用 VueX Store 中的计算属性进行 Ajax 调用的正确方法是啥

Posted 2023-02-23

【中文标题】使用 VueX Store 中的计算属性进行 Ajax 调用的正确方法是啥

【英文标题】：What is the proper way to do Ajax call with computed properties from VueX Store使用 VueX Store 中的计算属性进行 Ajax 调用的正确方法是什么

【发布时间】：2019-08-30 06:34:58

【问题描述】：

如何使用调用参数之一作为 VueX 中的计算状态进行 ajax 调用。例如，如果我创建 this.$axios.get('someUrl/' + accID )，accID 是来自 VueX 的计算属性（通过 MapState）。有时 id 返回“未定义”，我怀疑这是由于 axios 在从商店填充 id 数据之前发出 get 请求

我曾尝试在 Vue 组件中的“accID”上使用 watch() 来等待 accID 解析，但无济于事

//部分代码

 computed: 
    ...mapState(['user']),
  ,

 async fetchData() 


        const [foodData, option] = await Promise.all([
          this.$axios(
            url: `food/$this.user.accID`,
            method: 'get',
          ),
          this.$axios(
            url: 'options',
            method: 'get',
          )
        ])

  //foodData returns undefined because user.accID is undefined (sometimes)

期待

this.$axios( 网址：'食物/12345'， 方法：'得到' )

相反

this.$axios( 网址：'食物/未定义'， 方法：'得到' )

【问题讨论】：

稍微修改了url参数。我很确定我的原始代码中有 this.user.accID。

【参考方案1】：

在url 中将$user.accID 更改为$this.user.accID：

url: `food/$this.user.accID`,