vuex | yesixuan

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

state

what?

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

定义

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

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

使用

直接在组件模板里：。

在计算属性里面使用：

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这种局限性较大方式）。

1	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（我们那些可爱的映射函数都没法用了）。