Vuex学习记录

在vue项目中，常常会遇到状态管理的问题。

比如子组件的某一状态的改变会影响到父组件，这时，我们可以运用this.$parent的方式改变父亲组件某个data的值。

但是，如果该组件的状态同时影响其兄弟组件，那怎么办呢？有一个办法，就是先把值通过$this.parent传给父，然后再传给兄弟组件，但这样的工作实在很繁琐。

更糟糕的是，如果该组件的状态还影响了兄弟组件的子组件呢？那岂不是得层层嵌套通过props传值？

你说这个我也能接受，那好。如果一个月后，再让你回头修改代码，需要知道某组件的状态(比如显示隐藏)是哪里传来的，结果你层层向上找，层层向上找.....后面竟然忘了自己要干啥了。唔，这真是一个悲伤的故事。

所以，一个全局的状态管理是很有必要的。这里就有了我们的x字辈等状态管理工具，如redux。在vue中，就是vuex了：

一、

安装 Vuex 之后，让我们来创建一个 store。创建过程直截了当——仅需要提供一个初始 state 对象和一些 mutation：

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

在，我们可以通过 store.state 来获取状态对象，以及通过 store.commit 方法触发状态变更：

store.commit('increment')

console.log(store.state.count) // -> 1