Vuex

为什么使用vuex?

当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏：
1.多个视图依赖于同一状态。

• 对于问题一，传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。

2.来自不同视图的行为需要变更同一状态。

• 对于问题二，我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱，通常会导致无法维护的代码。

为了解决上述两个问题

因此，我们为什么不把组件的共享状态抽取出来，以一个全局单例模式管理呢？在这种模式下，我们的组件树构成了一个巨大的“视图”，不管在树的哪个位置，任何组件都能获取状态或者触发行为！

通过定义和隔离状态管理中的各种概念并通过强制规则维持视图和状态间的独立性，我们的代码将会变得更结构化且易维护。

结构图.png

<div id="app">
  <p>{{ count }}</p>
  <p>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
  </p>
</div>

// make sure to call Vue.use(Vuex) if using a module system
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment: state => state.count++,
    decrement: state => state.count--
  }
})

new Vue({
  el: '#app',
  computed: {
    count () {
        return store.state.count
    }
  },

//我们通过提交 mutation 的方式，而非直接改变 store.state.count，是因为我们想要更明确地追踪到状态的变化。
  methods: {
    increment () {
        store.commit('increment')
    },
    decrement () {
        store.commit('decrement')
    }
  }
})

1. 如果数据是同步的，可以通过commit直接提交到mutations来对state进行修改。
2. 如果数据是异步的，可以通过dispatch提交到actions使其变为同步操作，在actions里操作mutations来对state进行修改。