vuex状态管理到底是怎样一个原理？

Question

最近开始用vue来开发项目，结果是一脸懵逼。。。对vuex他的运行机制不怎么理解，然后就去看了https://github.com/vuejs/vuex... 这个简易教程结果运行起来各种报错，完全不知道怎么改，
比如：

<template>
  <div>
    <button @click='increment'>Increment +1</button>
  </div>
</template>

<script>
import { incrementCounter } from '../vuex/actions'
export default {
  vuex: {
    actions: {
      increment: incrementCounter
    }
  }
}
</script>

上面这个组件中绑定了increment方法，在运行的时候就会说increment没有定义，按照一般的组件方法也应该是绑定在methods里面的，不知道那个教程里面这样套在vuex下面的actions要怎样才能被绑定上去；
还有一个display组件

<template>
  <div>
    <h3>Count is {{ counterValue }}</h3>
  </div>
</template>

<script>
import { getCount } from '../vuex/getters'
export default {
  vuex: {
    getters: {
      // 注意在这里你需要 `getCount` 函数本身而不是它的执行结果 'getCount()'
      counterValue: getCount
    }
  }
}

他也是直接的就放在vuex下面的一个属性里面结果就是报错，说counterValue is not defined
看这个教程的时候最不能理解的就是这个vuex属性，他是怎样完成数据绑定的，我按照教程上写结果一堆报错，不知道是版本问题还是其他什么问题引起的，我用的vue和vuex都是2.0.0的

Answer 1

vue本身的安装和运行模式可以是npm、tower、或者直接html；为此官方的文档常常为了照顾到完整全面，并不能直接运行。所以，建议把你的那个实例丢了，看这个：

https://segmentfault.com/a/11...

Answer 2

vuex2.0的写法就不是这么写的， 都通过$store.state.coutValue 或者 $store.dispatch('getCount') 来调用的。

Answer 3

你用的vue和vuex都是2.0.0的，就不要去看1.0的教程了嘛。。。
1.0的那种写法在2.0已经废弃了。
PS：个人建议，如果你是刚开始学vue，先不要管vuex，把vue的基本内容学会了再考虑，因为前期做的轻量级的东西可能并不需要这么专业的状态管理。
http://vuex.vuejs.org/zh-cn/