Question

为什么 $store 没有定义？

2016-12-09

26722

javascript vue.js vuex

我正在努力用 vuejs 和 vuex 开发一个项目，但是它无法与组件中的 this.$store.state.count 一起使用。为什么？

我的配置：

"vuex": "^2.0.0"

store.js：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 12
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  strict: true
})

main.js：

import store from './vuex/store'
import Vue from 'vue'

new Vue({
  store,
  .
  .
  .
}).$mount('#app')

component.js：

<script>
export default {
    name: 'landing-page',
    created: () => {
      console.log('status2')
      console.log(this.$store.state.count)
    }
  }
</script>

错误：

Uncaught TypeError: Cannot read property '$store' of undefined

Answer 1

您永远不会直接编辑商店。

您将始终触发突变。

正如这样（component.js）：

<script>
import store from './vuex/store'

export default {
  name: 'landing-page',
  computed: {
    counter () {
      return store.state.count // get state
    }
  },
  created: () => {
    store.commit('increment') // set state
  }
}
</script>

Answer 2

这是因为箭头函数中的 this 并不是您期望的“普通函数”中的 this 。您可以参考箭头函数或 Javascript ES6 — 箭头函数和词法 this 了解更多信息