const store = new Vuex.Store({
  state,
  getters,
  mutations,
  actions,
  modules
})

const app = new Vue({
  el: '#app',
  // 把 store 对象提供给 “store” 选项，这可以把 store 的实例注入所有的子组件
  store,
  components: { Counter },
})

核心概念

• state

作用：
存储数据

state定义：
var state = {}

不使用vuex：
存储需要使用的变量，当多个组件使用时，需要在不同组件中重复引用。

使用vuex：
在vuex对象中写入state对象，并在vue根实例中引入vuex对象，所有子组件都可以访问。

使用方法：
this.$store.state.xx

• Getters

作用：
定义多组件使用的计算属性

getters定义：
传入state作为第一个参数，可以选其他getters作为第二个参数

var getters = {
  // ...
  doneTodosCount: (state, getters) => {
    return getters.doneTodos.length
  }

不使用vuex：
当多个组件使用同一个计算属性时，需要在多个组件中定义相同的计算属性。
如：

computed: {
  doneTodosCount () {
    return this.$store.state.todos.filter(todo => todo.done).length
  }
}

使用vuex：
在vuex对象中写入getters对象，所有子组件中可以使用。

使用方法：

computed: {
  doneTodosCount () {
    return this.$store.getters.doneTodosCount
  }
}

• Mutation

mutation定义：
每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)，接受state作为第一个参数，可传入额外的参数。是同步事件不可在事件回调函数中写入异步操作。

var mutations = {
    increment (state, n) {
      // 变更状态
      state.count += n
    }
  }

作用：
唯一修改store状态的途径是提交mutation中定义的事件，
相当于把state中的数据当成是可访问不可修改的私有变量，而mutation是不可直接调用的公有方法，被当成是事件的形式，需要发射事件触发相应的回调函数。

使用方法：
this.$store.commit('increment', n)

• Actions

actions定义：
Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。

  var actions = {
    increment (context) {
      context.commit('increment')
    }
  }

作用：
actions类似于mutations，不同的是actions提交的是mutation，而不是直接改变状态，并且可以在actions内部写入异步操作。

使用方法：
this.$store.dispatch('increment')