vuex

上图是官网中的vue的介绍（vuex官网）

1. state(相当于vue中的data)
   使用： this.$store.state.属性
   辅助函数： mapState

import { mapState } from 'vuex'
export default {
  computed: mapState({
    count: state => state.count,
    // 为了能够使用 `this` 获取局部状态，必须使用常规函数
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
    test （）{
    //自己定义的方法
    }
  })
}

// 使用对象展开运算符将此对象混入到外部对象中
  ...mapState({
    count: state => state.count
  })
  test () {
  // 自己定义的方法
  }

2. getter(相当于vue中的计算属性，使用时也放在computed中)
   使用： this.$store.getters.属性
   辅助函数：mapGetter

import { mapGetters } from 'vuex'
export default {
  computed: {
  // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
      // 给属性另起名字，使用对象的方式
      // doneCount: 'doneTodosCount'
    ])
  }
}

3. mutation（必须是同步函数,我理解的mutation就是一个事件）

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

使用

//方式一
store.commit('increment'，params) //第二个参数可以传参
//方式二
store.commit({
  type: 'increment',
  amount: 10
})

辅助函数：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')`
    })
  }
}

4. action
   action 提交的是 mutation，而不是直接变更状态。
   action 可以包含任意异步操作。

 mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {  //可以在action里执行异步操作
    increment (context) {
      context.commit('increment')
    }
  }

使用： store.dispatch('increment')   //分发action
//有参数时
// 以载荷形式分发
store.dispatch('incrementAsync', {
  amount: 10
})

// 以对象形式分发
store.dispatch({
  type: 'incrementAsync',
  amount: 10
})

辅助函数：mapActions

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')`
    })
  }
}

5. modules(当有多个模块时使用)