Vuex Store 使用 'this' 访问状态答案

【问题标题】：Vuex Store accessing state with 'this'Vuex Store 使用 'this' 访问状态
【发布时间】：2023-03-18 00:49:01
【问题描述】：

我目前正在学习 Vuex 并阅读 Vue 官方文档的this 部分。我想知道为什么我们会使用参数访问state 而不是仅使用this 是否有特殊原因？我测试了 this 是否可以正常工作。

Vue 示例

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

我的例子

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment () {
      this.count++;
    }
  }
})

【问题讨论】：

【解决方案1】：

Vuex 存储实例不是一个拥有自己的this 的普通对象，它可以被视为提供一些输入/输出的黑盒，它将状态作为参数传递，然后在其内部逻辑（模式）更新根据您的突变的状态，this 可在此处获得：

 mutations: {
    increment () {
      this.count++;
    }
  }

它指的是全局window 对象。

根据@Spinx cmets this 指的是版本 3 及更高版本中的 vuex 实例，我发现@Matt 所说的很好：

IMO 这是一个很好的例子，说明为什么你应该使用显式参数，因为你不知道你的函数是如何绑定的__Matt

【讨论】：

@Sphinx 是的，它指的是窗口，请检查this
上下文可能是window对象或Vuex instance基于实现。检查this fiddle
版本问题，我fork了你的项目并将Vuex版本从2.0更改为3.0，那么你项目中的上下文就变成了Vuex instance；检查this codepen；无论如何，开发人员不应依赖默认上下文，应始终按照用户指南使用参数来访问状态/上下文。
IMO 这是一个很好的例子，说明为什么你应该使用显式参数，因为你不知道你的函数是如何绑定的
感谢您的评论，我根据您提供的内容更新了我的答案