Question

我在派遣后更新状态时遇到问题。

控制台记录dispatch的结果将显示Promise pending和值undefined，因此永远不会进入商店。

下面是调用dispatch处理程序的函数。

unsetSelected() {
   let some = this.$store.dispatch('user/selectedDevice', null)
   console.log(some)
}


<span class="ellipsis" @click="setSelected(device)">
     <i v-if="selectedDevice && selectedDevice.id == device.id"
        @click="unsetSelected()"
        class="fa fa-times-circle">
     </i>
     <i v-else="" class="fa fa-ellipsis-v"></i>
</span>

这是动作处理程序：

selectedDevice ({ commit }, data) {
    commit ('SELECTED_DEVICE', data);
}

Answer 1

我对变异处理程序发出警报，发现代码按预期工作，只是它还在DOM中触发了以上的dispatch函数。

我必须使用.stop修饰符将其链接：@click.stop="unsetSelected()"

Answer 2

来自dispatch实例方法的Vuex API参考：

返回一个承诺，该承诺解决所有触发的动作处理程序。

因此，调用dispatch会返回Promise。为了在组件内部接收数据，应兑现这一承诺。

您可以将组件的方法修改为以下内容：

// using async/await
async unsetSelected() {
  try {
    let some = await this.$store.dispatch('user/selectedDevice', null)
    console.log(some)
  } catch (error) {
    // handle error
  }
}

// using Promise API
unsetSelected() {
  this.$store.dispatch('user/selectedDevice', null)
    .then((some) => {
      console.log(some)
    })
    .catch((error) => {
      // handle error
    })
}

此外，selectedDevice不返回任何数据，因此，来自已解决承诺的some（或响应）将是undefined，例如所提供的代码。

要解决此问题，存储操作应包含一个return语句，其中包含所需数据以返回到组件。

尽管，按照Vuex架构，建议使用map state/getters，在进行状态突变后，其值将进行反应性更新。

调度接收未定义的值

2 个答案: