vue-learning：41 - Vuex - 第二篇：const store = new Vue.Store(option)中option選項、store實例對象的屬性和方法

vuex 第二篇：const store = new Vue.Store(option)中option選項、store實例對象的屬性和方法

import Vuex from 'vuex'
const store = new Vuex.Store(option)

• Vuex對象
• option選項
• store實例對象的屬性
• store實例對象的方法

Vuex 對象

在使用Vuex時，看下Vuex對象提供了哪些屬性和方法。

// vuex源碼入口index.js
export default {
  Store,  // 倉庫store的構造函數
  install, // 提供vue.use(vuex)使用的插件安裝入口
  version: '__VERSION__',
  // store對象屬性和方法的輔助函數，后面講到
  mapState,
  mapMutations,
  mapGetters,
  mapActions,
  createNamespacedHelpers
}

option配置選項

const option = {
    state, // Object | Function
    getters, // { [key: string]: Function(state, getters, rootState, rootGetters ) }
    mutations, // { [type: string]: Function(state, paylaod) }
    actions, // { [type: string]: Function(context, payload) } context= {state,rootState, getters, rootGetters, commit, dispatch }
    modules, // {key: {namespaced?, state, mutations, getters?, actions?, modules?}}
    plugins, // Array<Function(store)>
    strict, // Boolean,默認false
    devtools, // Boolean,默認false
}

實例對象store的屬性

const store = new Vuex.Store(...option)
// 只讀屬性，調用已option中注冊的state 和 getters
store.state
store.getters

實例對象store的方法

commit() | dispatch()

store.commit(type: string, payload?: any, options?: Object) // commit(mutation: Object, options?: Object),即對象形式commit({type:string, payload?:any}, {root:ture})
store.dispatch(type: string, payload?: any, options?: Object) // dispatch(action: Object, options?: Object),即對象形式dispatch({type:string, payload?:any}, {root:ture})

// 如果定義了一個action返回的是promise對象，那么dispatch這個action后返回的仍是一個promise對象
actions: {
  actionA ({ commit }) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        commit('someMutation')
        resolve()
      }, 1000)
    })
  }
}
store.dispatch('actionA').then(() => {
  // ...
})

注冊和卸載plugin的方法

// 訂閱mutation的變化。handler 會在每個 mutation 完成后調用。 如果取消訂閱，調用返回函數unsubscribe()
const unsubscribe = store.subscribe(handler(mutation,state){})
const unsubscribeAction = store.subscribeAction(handler(action, state){})
const unsubscribeAction = store.subscribeAction({before(action,state){},after(action,state){}})

// 定義一個訂閱mutation的插件
const myPlugin = store => {
  // 當 store 初始化后調用
  store.subscribe((mutation, state) => {
    // 每次 mutation 之后調用
    // mutation 的格式為 { type, payload }
  })
}

// 在store中注冊自定義插件
const store = new Vuex.Store({
  // ...
  plugins: [myPlugin]
})

注冊和卸載模塊module的方法

// 注冊模塊
// Array<string> 注冊嵌套模塊 `nested/myModule`: ['nested', 'myModule']
// Module是一個對象，包含正常{key: {namespaced?, state, mutations, getters?, actions?, modules?}}
// options可以包含 preserveState: true 以允許保留之前的 state。用於服務端渲染
store.registerModule(path: string | Array<string>, module: Module, options?: Object)

// 卸載模塊
store.unregisterModule(path: string | Array<string>)

vuex的輔助函數

// 在組件中引入
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
// 使用
mapState(namespace?: string, map: Array<string> | Object<string | function>): Object
mapGetters(namespace?: string, map: Array<string> | Object<string>): Object
mapMutations(namespace?: string, map: Array<string> | Object<string | function>): Object
mapActions(namespace?: string, map: Array<string> | Object<string | function>): Object

示例：

import { mapState } from 'vuex'
export default {
  // ...
  computed: {
    // Array<string>：當映射的計算屬性的名稱與 state 的子節點名稱相同時，我們也可以給 mapState 傳一個字符串數組
    ...mapState(namespace?: string, ['count'])
    // Object<string | function>對象形式
    ...mapState(namespace?: string, {
        // 傳字符串參數 'count' 等同於 `state => state.count`
        countAlias: 'count',

        // 函數形式，接收state作為參數
        count: state => state.count,

        // 為了能夠使用 `this` 獲取局部狀態，必須使用常規函數
        countPlusLocalState (state) {
        return state.count + this.localCount
        }
    })
  }
}

import { mapGetters } from 'vuex'
export default {
  // ...
  computed: {
    // 使用對象展開運算符將 getter 混入 computed 對象中
    ...mapGetters(namespace?: string,[
      'doneTodosCount',
      'anotherGetter',
      // ...
    ]),
    // 如果你想將一個 getter 屬性另取一個名字，使用對象形式，只有key:string,沒有function函數形式
    ...mapGetters(namespace?: string,{
        // 把 `this.doneCount` 映射為 `this.$store.getters.doneTodosCount`
        doneCount: 'doneTodosCount'
    })
  }
}

import { mapMutations } from 'vuex'
export default {
  // ...
  methods: {
    ...mapMutations(namespace?: string,[
      'increment', // 將 `this.increment()` 映射為 `this.$store.commit('increment')`

      // `mapMutations` 也支持載荷：
      'incrementBy' // 將 `this.incrementBy(amount)` 映射為 `this.$store.commit('incrementBy', amount)`
    ]),
    ...mapMutations(namespace?: string,{
      add: 'increment' // 將 `this.add()` 映射為 `this.$store.commit('increment')`
    })
  }
}

import { mapActions } from 'vuex'
export default {
  // ...
  methods: {
    ...mapActions(namespace?: string,[
      'increment', // 將 `this.increment()` 映射為 `this.$store.dispatch('increment')`

      // `mapActions` 也支持載荷：
      'incrementBy' // 將 `this.incrementBy(amount)` 映射為 `this.$store.dispatch('incrementBy', amount)`
    ]),
    ...mapActions(namespace?: string,{
      add: 'increment' // 將 `this.add()` 映射為 `this.$store.dispatch('increment')`
    })
  }
}

vuex項目組織

Vuex下Store的模塊化拆分實踐

參考鏈接

vuex源碼分析
小火柴的藍色理想:Vue狀態管理vuex
前端狀態管理與有限狀態機