state、getters、mutations、actions對(duì)比圖

默認(rèn)情況下，模塊內(nèi)部的 action、mutation 和 getter 是注冊(cè)在全局命名空間的,所以這幾個(gè)都默認(rèn)是全局狀態(tài),如果所有文件都有namespaced: true,那么獲取全局文件中狀態(tài)或方法都跟namespace: false一致,除了在actions中調(diào)用子模塊中的方法時(shí)還是需要用到{root: true}注意:mapState和mapGetters是放在computed中,mapMutations、mapActions是放在methods中

Module

命名空間

默認(rèn)情況下,模塊內(nèi)部的 action、mutation 和 getter 是注冊(cè)在全局命名空間的——這樣使得不同模塊相同命名能夠?qū)ν?mutation 或 action 作出響應(yīng).
如果希望你的模塊具有更高的封裝度和復(fù)用性,你可以通過添加namespaced: true的方式使其成為帶命名空間的模塊.當(dāng)模塊被注冊(cè)后,它的所有g(shù)etter、action、mutation都會(huì)自動(dòng)根據(jù)模塊注冊(cè)的路徑調(diào)整命名.

在帶命名空間的模塊內(nèi)訪問全局內(nèi)容

若需要在全局命名空間內(nèi)分發(fā) action 或提交 mutation,將 { root: true } 作為第三參數(shù)傳給 dispatch 或 commit 即可.

    actions: {
      // 在這個(gè)模塊中， dispatch 和 commit 也被局部化了
      // 他們可以接受 `root` 屬性以訪問根 dispatch 或 commit
      someAction ({ dispatch, commit, getters, rootGetters }) {
        getters.someGetter // -> 'foo/someGetter'
        rootGetters.someGetter // -> 'someGetter'
        dispatch('someOtherAction') // -> 'foo/someOtherAction'
        dispatch('someOtherAction', null, { root: true }) // -> 'someOtherAction'
        commit('someMutation') // -> 'foo/someMutation'
        commit('someMutation', null, { root: true }) // -> 'someMutation'
      },
      someOtherAction (ctx, payload) { ... }
    }
  }

在帶命名空間的模塊注冊(cè)全局 action

若需要在帶命名空間的模塊注冊(cè)全局 action，你可添加 root: true，并將這個(gè) action 的定義放在函數(shù) handler 中。例如：

  modules: {
    foo: {
      namespaced: true,
      actions: {
        someAction: {
          root: true,
          handler (namespacedContext, payload) { ... } // -> 'someAction'
        }
      }
    }
  }

帶命名空間的綁定函數(shù)

當(dāng)使用 mapState, mapGetters, mapActions 和 mapMutations 這些函數(shù)來綁定帶命名空間的模塊時(shí)，寫起來可能比較繁瑣：

computed: {
  ...mapState({
    a: state => state.some.nested.module.a,
    b: state => state.some.nested.module.b
  })
},

對(duì)于這種情況，你可以將模塊的空間名稱字符串作為第一個(gè)參數(shù)傳遞給上述函數(shù)，這樣所有綁定都會(huì)自動(dòng)將該模塊作為上下文。于是上面的例子可以簡(jiǎn)化為：

computed: {
  ...mapState('some/nested/module', {
    a: state => state.a,
    b: state => state.b
  })
},

而且，你可以通過使用 createNamespacedHelpers 創(chuàng)建基于某個(gè)命名空間輔助函數(shù)。它返回一個(gè)對(duì)象，對(duì)象里有新的綁定在給定命名空間值上的組件綁定輔助函數(shù)：

import { createNamespacedHelpers } from 'vuex'
const { mapState, mapActions } = createNamespacedHelpers('some/nested/module')
export default {
  computed: {
    // 在 `some/nested/module` 中查找
    ...mapState({
      a: state => state.a,
      b: state => state.b
    })
  }
}

subscribe

訂閱 store 的 mutation。handler 會(huì)在每個(gè) mutation 完成后調(diào)用，接收 mutation 和經(jīng)過 mutation 后的狀態(tài)作為參數(shù)：

store.subscribe((mutation, state) => {
  console.log(mutation.type)
  console.log(mutation.payload)
})

subscribeAction

訂閱 store 的 action。handler 會(huì)在每個(gè) action 分發(fā)的時(shí)候調(diào)用并接收 action 描述和當(dāng)前的 store 的 state 這兩個(gè)參數(shù)：

store.subscribeAction((action, state) => {
  console.log(action.type)
  console.log(action.payload)
})

從 3.1.0 起，subscribeAction 也可以指定訂閱處理函數(shù)的被調(diào)用時(shí)機(jī)應(yīng)該在一個(gè) action 分發(fā)之前還是之后 (默認(rèn)行為是之前)：

store.subscribeAction({
  before: (action, state) => {
    console.log(`before action ${action.type}`)
  },
  after: (action, state) => {
    console.log(`after action ${action.type}`)
  }
})

雙向綁定的計(jì)算屬性

<input v-model="message">

computed: {
  message: {
    get () {
      return this.$store.state.obj.message
    },
    set (value) {
      this.$store.commit('updateMessage', value)
    }
  }
}