Vuex 是什么？

有时候我们需要全局操作组件的状态，父子组件传参又太过于繁琐，这个时候我们选择
vuex 来作为全局状态管理模式

什么是全局状态管理模式？

这个状态自管理应用包含以下几个部分：

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

flow.png

1.1 state

全局的状态存放在state中，方便每一个组件的使用

  new vuex.Store({
    state: {
      count: 0
    }
  })

我们一般将 state 的值通过 computed 计算属性的形式来展现到各组件中：

component组件：

  var component = {
    template: `component组件   {{ count }}`,
    computed: {
      count() {
        return this.$store.state.count
      }
    }
  }

每当 store.state.count 变化的时候, 都会重新求取计算属性，并且触发更新相关联的 DOM。

1.2 mapState 辅助函数

当我们需要多个数据时，使用上面的方法会使代码非常的冗余，建议使用mapState 来同时获取多个数据。

import {mapState} from 'vuex'
export default {
  // ...
  computed: mapState({
    // 箭头函数可使代码更简练
    count: state => state.count,

    // 传字符串参数 'count' 等同于 `state => state.count`
    countAlias: 'count',

    // 为了能够使用 `this` 获取局部状态，必须使用常规函数
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  })

当映射的计算属性的名称与 state 的子节点名称相同时，我们也可以给 mapState 传一个字符串数组。

computed: mapState([
  // 映射 this.count 为 store.state.count
  'count'
])

1.1 Getter

getter的作用：
当用户获取state数据时，我们希望对state数据进行一些外加的操作，跟自定义过滤器非常的类似。

new Vuex.Store({
  state: {
    count: [1, 2, 3, 4, 5]
  },
  getters: {
    maxNum(state) {
      return Math.max(...state.count)
    }
  }
})

1.2 通过属性访问

Getter 会暴露为 store.getters 对象，你可以以属性的形式访问这些值：

var component = {
  template: `<div > {{ maxNum }}</div>`,
  computed: {
    maxNum() {
        return  this.$store.getters.maxNum  //  5        
     }
  }
}

1.3 mapGetters 辅助函数

mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性：

import { mapGetters } from 'vuex'

export default {
  // ...
  computed: {
  // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters([
      'maxNum',
      // ...
    ])
  }
}

如果你想将一个 getter 属性另取一个名字，使用对象形式:

  mapGetters({
// 就是将属性名 maxNum 改为 max 而已。
  max: 'maxNum'
})

vue 全家桶之 vuex