日拱一卒-vuex的使用（一）

在模块化开发中，我们时常会封装各种组件。
当组件多了，组件间传值就多了。
而当组件间关系复杂的时候，传值也会变得非常复杂。
这个时候vuex就应运而生了。
vuex的设计思想，就和设计模式中的中介者模式一样。
本来是组件之间的通信，是一对多，现在每个组件都和中介者通信，变成了一对一通信。维护起来都会方便很多。
vuex的使用非常简单，不需要完全掌握就能开始简单使用：
首先创建一个store.js文件：

// 引入vuex
import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex)

// 实例化vuex
const store = new Vuex.Store({
  state: {
    // 存储计数值
    count: 0
  },
  mutations: {
    increment (state) {
      // 计数值加一
      state.count++
    }
  }
})

之后就是在main.js中引入并使用：

import store from "./store.js"

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

之后就可以在各个组件中愉快地使用全局状态了：

computed: {
  count () {
    // 通过this.$store获取到我们的store
    return this.$store.state.count
  }
},
methods: {
  increase(){
    this.$store.commit("increment");
  }
}

当然，还有很多高级的用法，接下来的时间会慢慢完善一下，最简单的用法就是这样，先用起来了~