vuex状态管理使用

1.前言：

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，可以理解为一个共享仓库，可以实现多个组件共享状态。

每一个 Vuex 应用的核心就是 store（仓库），两个特点：

1）Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新；

2）改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation，这样做的好处是方便地跟踪每一个状态的变化

2. state

const state = {
count: 123
}

export default new Vuex.Store({
strict: true,
state,
mutations,
getters,
actions
})

state为单一状态树，在state中需要定义我们所需要管理的数组、对象、字符串等等，只有在这里定义了，在vue.js的组件中才能获取你定义的这个对象的状态;

由于 Vuex 的状态存储是响应式的，从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态

computed: {
count () {    // 传统方式(mapState)
return this.$store.state.count
}
},

// 在单独构建的版本中辅助函数为 mapState
       import { mapState } from 'vuex'

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

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

        computed: mapState([
          // 映射名一样时， 映射 this.count 为 store.state.count
          'count'
        ])
        
        computed: {
          localComputed () {  ...  },
          // 使用对象展开运算符将此对象混入到外部对象中
          ...mapState({
            // ...
          })
        }

3. getter

     getter有点类似vue.js的计算属性，当我们需要从store的state中派生出一些状态，那么我们就需要使用getter，getter会接收state作为第一个参数，而且getter的返回值会根据它的依赖被缓存起来，只有getter中的依赖值（state中的某个需要派生状态的值）发生改变的时候才会被重新计算。

getters: {

     todoOri: (state) => state.todos

    todo: (state) => state.todos.filter(todo => todo.done)

}

    使用赋值函数mapGetters

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

              mapGetters({
              // 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount`
              doneCount: 'doneTodosCount'
            })

4.mutation（方便地跟踪每一个状态的变化）

       更改store中state状态的唯一方法就是提交mutation，就很类似事件。每个mutation都有一个字符串类型的事件类型和一个回调函数，我们需要改变state的值就要在回调函数中改变。我们要执行这个回调函数，那么我们需要执行一个相应的调用方法：store.commit。
        
       使用常量替代 mutation 事件类型，把这些常量放在单独的文件中（mutation-types.js）可以让你的代码合作者对整个 app 包含的 mutation 一目了然;
        mutation 必须是同步函数; 例如，当你调用了两个包含异步回调的 mutation 来改变状态，你怎么知道什么时候回调和哪个先回调呢

      mapMutations 辅助函数 
        import { mapMutations } from 'vuex'

        export default {
          // ...
          methods: {
            ...mapMutations([
              'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`

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

5. action

        action 提交的是 mutation，而不是直接变更状态;
        action 可以包含任意异步操作
        action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters
        action 通过 store.dispatch 方法触发;
        你在组件中使用 this.$store.dispatch('xxx') 分发 action，或者使用 mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用（需要先在根节点注入 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')`
            })
          }
        }