时间戳

首页 > 解决方案 > Vuex Store 使用 'this' 访问状态

javascript - Vuex Store 使用 'this' 访问状态

问题描述

我目前正在学习 Vuex 并阅读Vue 官方文档的这一部分。我想知道是否有特殊原因为什么我们会使用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++;
    }
  }
})

标签： javascriptvue.jsvuejs2vuexstore

解决方案

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

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

它指的是全局window对象。

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

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

推荐阅读