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

Question

我难住了。我制作了一个简短的视频，显示调试器正确评估了表达式，但是当它越过时，它会抛出。

它来自 vue 组件中的 getter 访问this.$store.state.Obj.value

https://youtu.be/IRQB1ZWNoGk

关于为什么它会在调试器控制台中正确评估但在跨步时抛出的任何建议？

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

在this调试器中评估我的组件，但在跨过它时抛出。

供参考。我试图按照这种模式使 v-model 工作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); },