Vuex存储使用“ this”访问状态

时间:2020-09-04 21:06:47

标签: javascript vue.js vuejs2 vuex store

我目前正在学习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 个答案:

答案 0 :(得分:3)

Vuex存储实例不是具有自己的this的普通对象,可以将其视为黑盒,它提供一些输入/输出,因为它将状态作为参数传递,然后在其逻辑内部(模式)根据您的突变更新状态,this可以在此处使用:

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

它指向全局window对象。

根据@Spinx注释this指的是版本3和更高版本中的vuex实例,我发现@Matt所说的是一个很好的注释:

IMO这是为什么您应该使用显式参数的一个很好的示例,因为您不知道函数的绑定方式__Matt