Vuex Store 使用 'this' 访问状态

Posted 2023-02-22

【中文标题】Vuex Store 使用 \'this\' 访问状态

【英文标题】：Vuex Store accessing state with 'this'Vuex Store 使用 'this' 访问状态

【发布时间】：2020-12-24 03:09:51

【问题描述】：

我目前正在学习 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 这是一个很好的例子，说明为什么你应该使用显式参数，因为你不知道你的函数是如何绑定的

感谢您的评论，我根据您提供的内容更新了我的答案