vuex 状态管理模式

Vuex： 单一状态树

Vuex 的定义：

import Vue from 'vue'
import Vuex from 'vuex'

const store = new Vuex.Store({
    state: {                   // 数据
        count: 0
    },
    mutations: {               // 修改Store 内数据状态的方法，必须是同步事务
        increment (state,n) {  // n: 入参
            state.count++
        }
    },
    actions: {                 // 类 mutations，可以包含异步事务
        incrementAsync ({ commit,state },n) { // commit 类 Store
            setTimeout(() => {
                commit('increment')
            })
        }
    }
})

Vuex 在组件内的使用：

// vuex 的修改
mutations:
  单个：this.$store.commit('increment',n)
  多个：...mapMutations([
          'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`
          'incrementBy' // 将 `this.incrementBy(amount)` 映射为`this.$store.commit('incrementBy', amount)`
       ])

actions:
  单个：this.$store.dispatch('increment',n)
  多个：...mapActions([
          'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`
          'incrementBy' // 将 `this.incrementBy(amount)` 映射为`this.$store.dispatch('incrementBy', amount)`
       ])


// vuex 的获取 
单个：computed: {
       count () {
         return this.$store.state.count
       }
     }
多个：mapState 辅助函数
    computed: {
      // 使用对象展开运算符将此对象混入到外部对象中
      ...mapState([
        'count',...
      ])
    }