mapState，mapGetters，mapMutations， mapActions 輔助函數(shù)參數(shù)必須是數(shù)組或者對象

// index.js
import Vue from 'vue'
import Vuex from 'vuex'

import user from './modules/user'
export default new Vuex.Store({
  state: {
    mobile: '',
    userId: 8023,
    count: 0,
    list: [1, 2, 3, 18, 20]
  },
  mutations: {
    SET_MOBILE (state, value) {
      state.mobile = value
    },
    increment (state) {
      state.count++
    }
  },
  getters: {
      /**
     * 接收兩個參數(shù)， 第一個是state, 第二個是getters本身
     */
    isHasMobile (state, getters) {
      return Boolean(state.mobile)
    }
  },
  actions: {
    increment ({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  },
  /**
   * mutations、actions、getters默認(rèn)在全局命名空間注冊   注意在不同的、無命名空間的兩個模塊中使用相同的變量會報錯
   * 要開啟命名空間 namespaced: true    注意:這里是namespaced   后面有個d，  很容易寫錯，導(dǎo)致命名空間無效
   */
  modules: {
    user
  }
})

 // user.js

export default {
  namespaced: true,
  state: {
    userId: '22',
    name: 'zs'
  },
  mutations: {
    SET_USER_ID (state, value) {
      state.userId = value
    },
    changeName (state, value) {
      // setTimeout(() => {
      state.name = value
      // }, 1000)
    }
  },
  getters: {
    isHasUserId (state) {
      return Boolean(state.userId)
    },
    userId (state, getters) {
      return state.userId
    },
     /**
     * 在帶命名空間的模塊中的訪問全局內(nèi)容
     * rootState 和 rootGetters 會作為第三和第四參數(shù)傳入 getter
     */
    info (state, getters, rootState, rootGetters) {
      return state.name + '-' + getters.userId + '-' + rootState.count + '-' + rootGetters.filterNums[0]
    }
  },
  actions: {
     /**
     * 在帶命名空間的模塊中的訪問全局內(nèi)容
     * rootState 和 rootGetters 也會通過 context 對象的屬性傳入 action
     */
    testActionFn ({ dispath ,commit, rootState, rootGetters }) {
      setTimeout(() => {
        commit('changeName', 'ls')
      }, 1000)
    },
    /**
    * 在帶命名空間的模塊中
    * 需要在全局命名空間內(nèi)分發(fā) action 或提交 mutation，將 { root: true } 作為第三參數(shù)傳給 dispatch 或 commit 即可
    */
    someAction({ dispath ,commit, rootState, rootGetters }){
      setTimeout(() => {
        commit('increment', 'ls', {root: true})
        dispath('increment', null, {root: true})
      }, 1000)
    }
  }
}

一、mapState

mapState() 在computed中使用

  computed: {
    ...mapState({
      userId: state => state.userId
    }),
    ...mapState(['mobile', 'count']),
        
    //引用user module中的state
    ...mapState({userId: state => state.user.userId})
    ...mapState('user', ['name']),
    //賦值其他變量
    ...mapState('user', { userId1: 'userId' }),
  },

二、mapGetters

mapState() 在computed中使用。

 computed: {
    ...mapGetters(['isHasMobile']),
    //引用user module中的getters
    ...mapGetters('user', ['isHasUserId', 'info'])
  },

三、mapMutations

mapMutations() 在methods中使用

  methods: {
    ...mapMutations(['SET_MOBILE']),  // -> 調(diào)用全局命名空間中的mutations
    ...mapMutations('user', ['SET_USER_ID']),  // -> 調(diào)用命名空間中的mutations
    ...mapMutations(['user/changeName']), // -> 調(diào)用命名空間中的mutations，  this['user/changeName']('ww')  必須以這種方式調(diào)用
    changeIpt (e) {
      this.iptVal = e.target.value
      this.SET_MOBILE(e.target.value)
    },
    setUserId () {
      this['user/changeName']('ww')
      this.SET_USER_ID(this.iptVal)
    }
  }

四、mapActions

  methods: {
    ...mapActions(['increment']), // -> 調(diào)用全局命名空間中的actions
    ...mapActions('user', ['testActionFn']), // -> 調(diào)用命名空間中的actions
        
    testAction () {
      // this.$store.dispatch('increment')
      // this.increment()
      this.testActionFn()
    }
  }

五、通過使用 createNamespacedHelpers 創(chuàng)建基于某個命名空間輔助函數(shù)

import { createNamespacedHelpers } from 'vuex'


const { mapState, mapActions } = createNamespacedHelpers('user')

computed: {
    // 在 `user` 模塊中查找
    ...mapState({
      userId: state => state.userId,
      name: state => state.name
    })
  },
  methods: {
    // 在 `user` 模塊中查找
    ...mapActions([
      'testActionFn',
      'someAction'
    ])
  }

六、說一下為什么有了state，還要有g(shù)etters？為什么mutations中只能使用同步函數(shù)？

1. getters相當(dāng)于store的計算屬性，如果有多個組件需要用到此屬性，可以使用getters
2. 主要是不方便debug， 這里前面觸發(fā)的action中name是ls，后面觸發(fā) mutations中name狀態(tài)還是zs。

image-20220428143311027.png

image-20220428143303561.png