单项数据流与Vuex

单项数据流

单向数据流（Unidirectional data flow）方式使用一个上传数据流和一个下传数据流进行双向数据通信，两个数据流之间相互独立

简单来说，单向数据流就是指只能从一个方向来改变数据和状态。

Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

Vue中的单项数据流模型
因为单项数据流在处理问题的时候非常简单，但在vue项目的开发过程中会遇到一种情况就是多个组件需要共享同一种状态时。无法处理兄弟组件之间的传值。例如购物车的案例，购物车组件的数据要和显示数据的兄弟组件之间的传递就会遇到这种问题。并且，当有很多父子组件进行传值的时候，就会变得异常混乱，加大维护的困难。所以Vuex就是为了解决这中问题而诞生。
简单讲，可以把它理解为一个全局的“事件仓库”（这也是Vuex的核心）。所有的数据更改都在这个仓库中，在任何地方都可以在这条线上监听数据的改变。

• state，驱动应用的数据源；
• view，以声明方式将 state 映射到视图；
• actions，响应在 view 上的用户输入导致的状态变化。

获取state

1、最简单的方法就是通过计算属性。因为vue是以数据驱动，所以当state改变，会直接通过计算属性来展现出来。

computed: {
    count () {
      return store.state.count
    }
  }

2、通过在根实例中注册 store 选项，该 store 实例会注入到根组件下的所有子组件中，且子组件能通过 this.$store 访问到。

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

提交 mutation

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation，并且这个过程是同步的。：每个 mutation 都有一个字符串的事件类型 (type) 和一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数(也可以向 store.commit 传入额外的参数，即 mutation 的载荷（payload）)

mutations: {
    increment (state) {
      // 变更状态
      state.count++
    }
  }

调用提交

store.commit('increment')

Action

• Action 提交的是 mutation，而不是直接变更状态。
• Action 可以包含任意异步操作。
• 异步逻辑都应该封装到 action 里面。

Action 通过 store.dispatch 方法触发：

store.dispatch('increment')

购物车案例

  checkout ({ commit, state }, products) {
    // 把当前购物车的物品备份起来
    const savedCartItems = [...state.cart.added]
    // 发出结账请求，然后乐观地清空购物车
    commit(types.CHECKOUT_REQUEST)
    // 购物 API 接受一个成功回调和一个失败回调
    shop.buyProducts(
      products,
      // 成功操作
      () => commit(types.CHECKOUT_SUCCESS),
      // 失败操作
      () => commit(types.CHECKOUT_FAILURE, savedCartItems)
    )
  }
}

在组件中分发 Action

在组件中使用 this.$store.dispatch('xxx') 分发 action，或者使用mapActions辅助函数将组件的 methods 映射调用（需要先在根节点注入 store）：

import { mapActions } from 'vuex'
export default {
  // ...
  methods: {
    ...mapActions([
      'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`

      // `mapActions` 也支持载荷：
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`
    ]),
    ...mapActions({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
    })
  }
}