调度接收未定义为值

Question

我在调度后更新状态时遇到问题。

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

console result

下面是调用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 参考：

返回解析所有触发的操作处理程序的 Promise。

所以调用dispatch 会返回Promise。为了在组件内部接收数据，这个 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，其值将在状态突变提交后响应更新。