import Vue from 'vue'
import Vuex from 'vuex'
//注册vuex插件
Vue.use(Vuex)

// root state object.
// each Vuex instance is just a single state tree.
//定义state
const state = {
  count: 0
}

// mutations are operations that actually mutates the state.
// each mutation handler gets the entire state tree as the
// first argument, followed by additional payload arguments.
// mutations must be synchronous and can be recorded by plugins
// for debugging purposes.
//定义mutations
const mutations = {
  increment (state) {
    state.count++
  },
  decrement (state) {
    state.count--
  }
}

// actions are functions that cause side effects and can involve
// asynchronous operations.
//定义actions
const actions = {
  increment: ({ commit }) => commit('increment'),
  decrement: ({ commit }) => commit('decrement'),
  incrementIfOdd ({ commit, state }) {
    if ((state.count + 1) % 2 === 0) {
      commit('increment')
    }
  },
  incrementAsync ({ commit }) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        commit('increment')
        resolve()
      }, 1000)
    })
  }
}

// getters are functions
//定义getters
const getters = {
  evenOrOdd: state => state.count % 2 === 0 ? 'even' : 'odd'
}

// A Vuex instance is created by combining the state, mutations, actions,
// and getters.
//导出vuex实例
export default new Vuex.Store({
  state,
  getters,
  actions,
  mutations
})
```   

首先注册vuex插件

```vuejs
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

new Vue({
  el: '#root',
  router,
  store, 
  render: h => h(App)
})

export function install (_Vue) {
  //这里使用全局变量Vue进行判断，避免重复安装
  if (Vue && _Vue === Vue) {
    if (process.env.NODE_ENV !== 'production') {
      console.error(
        '[vuex] already installed. Vue.use(Vuex) should be called only once.'
      )
    }
    return
  }
  Vue = _Vue
  //重点在这里
  applyMixin(Vue)
}

export default function (Vue) {
  const version = Number(Vue.version.split('.')[0])

  if (version >= 2) {
    //在2.x.x以上版本，直接使用hook的形式进行注入
    Vue.mixin({ beforeCreate: vuexInit })
  } else {
    // override init and inject vuex init procedure
    // for 1.x backwards compatibility.
    //在2.x.x一下版本，使用封装并替换Vue对象原型的_init方法，实现注入
    const _init = Vue.prototype._init
    Vue.prototype._init = function (options = {}) {
      options.init = options.init
        ? [vuexInit].concat(options.init)
        : vuexInit
      _init.call(this, options)
    }
  }

  /**
   * Vuex init hook, injected into each instances init hooks list.
   */
  function vuexInit () {
    const options = this.$options
    // store injection
    if (options.store) {
      //根组件就直接设置到this对象的$store属性上
      this.$store = typeof options.store === 'function'
        ? options.store()
        : options.store
    } else if (options.parent && options.parent.$store) {
      //子组件从其父组件引用$store属性，层层嵌套进行设置
      this.$store = options.parent.$store
    }
  }
}