VUEX

凌晨四点多惊醒，杂事纷呈，再难入眠。浑浑噩噩坐上地铁，坐地铁的近一个小时时间看了CSDN的老师讲vuex的视频，确实解惑不少...

state

what?

state是整个应用的数据中心，管理整个应用的状态。也称为状态对象

定义

一般是定义在store/index.js中，就是一个大的对象（或者单独来一个state.js引进来）。

  const state = {
    count: 0,
    history: []
  }
  const store = new Vuex.Store({
    state
  })

使用

• 直接在组件模板里：{{$store.state.count}}
• 在计算属性里面使用：

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

• 最高级的用法：

  computed:{
    ...mapState([
      count
    ])
  }

mutations

what?

我把它理解为直接操作状态对象的操作中心

定义

一般是定义在store/mutations.js中,里面暴露了多个函数来改变状态对象

  export const increment = state => {
    state.count++
    state.history.push('increment')
  }

使用

  mothods: {
    ...mapMutations([
      increment
    ])
  }

getters

what?

getter可以看作是state的计算属性，即通过状态对象衍生出来的数据。从它的名字为getter可以看出,通过读取state得到衍生值

定义

一般是定义在store/getters.js中,里面暴露了许多值，这些值都是通过函数返回值赋值（通过这种方式可以避免在组件内直接使用mapState这种局限性较大方式）

  export const count = state => state.count

使用

  computed: {
    ...mapGetters([
      count
    ])
  }

actions

what?

action用来派发mutation,一个action中可以触发多个mutation，在不同的时间不同的条件下触发不同的mutation（异步操作在此处执行）

定义

一般是定义在store/actions.js中,里面暴露了很多方法。方法里面触发mutation（函数默认的第一个参数是context，下例使用了对象的结构）

  export const incrementIfOdd = ({ commit, state }) => {
    if ((state.count + 1) % 2 === 0) {
      commit('increment')
    }
  }

  export const incrementAsync = ({ commit }) => {
    setTimeout(() => {
      commit('increment')
    }, 1000)
  }

使用

  mothods: {
    ...mapActions([
      incrementIfOdd,
      incrementAsync
    ])
  }

module

what?

用来将上述种种进行模块化

定义

  const moduleA = {
    state,
    getters,
    actions,
    mutations
  }
  export default new Vuex.Store({
    modules: {
      moduleA
    }
  })

使用

实际上就是在state后面多加了一层moduleA（我们那些可爱的映射函数都没法用了）