Question

我很困惑。我制作了一个简短的视频，显示调试器正确评估了表达式，但是当它移开时，它将抛出。

它来自vue组件中的吸气剂，它访问this.$store.state.Obj.value

关于为什么要在调试器控制台中正确评估但在跳过时会抛出错误的任何建议？

computed: {
  mode: {
    get: () => this.state.$store.getters.mode,

this会在调试器中求值到我的组件，但是将其移到调试器上时会抛出。

仅供参考。我试图遵循这种模式使v模型工作https://vuex.vuejs.org/guide/forms.html#two-way-computed-property

Answer 1

尝试使用箭头功能来捕获这样的错误：

.catch (e => {
   //Then you can access 'this' here
})

Answer 2

我认为chrome调试器显示给我的本地范围上下文之间的脱节感到困惑，因为它是使用babel编译的。编译器试图向我展示原始源，但实际运行的JavaScript却有所不同。

这才是最终的解决方案。它显示了两者的工作方式。首先，传递状态。其次，使用了不同的符号。

computed: {
  ...mapState(['MainMode']),
  mode: {
    get: state => state.MainMode.mode,
    set(val) { this.$store.dispatch('updateMode', val); },
  },

此处的密钥this 失败

   set: val => this.$store.dispatch('updateMode', val),

this工作期间

   set(val) { this.$store.dispatch('updateMode', val); },

Vuex $ state从调试器正确评估，但在执行时抛出

2 个答案: