vuex辅助函数学习

mapState，mapGetters，mapMutations， mapActions 辅助函数参数必须是数组或者对象

// 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: {
      /**
     * 接收两个参数， 第一个是state, 第二个是getters本身
     */
    isHasMobile (state, getters) {
      return Boolean(state.mobile)
    }
  },
  actions: {
    increment ({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  },
  /**
   * mutations、actions、getters默认在全局命名空间注册   注意在不同的、无命名空间的两个模块中使用相同的变量会报错
   * 要开启命名空间 namespaced: true    注意:这里是namespaced   后面有个d，  很容易写错，导致命名空间无效
   */
  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
    },
     /**
     * 在带命名空间的模块中的访问全局内容
     * rootState 和 rootGetters 会作为第三和第四参数传入 getter
     */
    info (state, getters, rootState, rootGetters) {
      return state.name + '-' + getters.userId + '-' + rootState.count + '-' + rootGetters.filterNums[0]
    }
  },
  actions: {
     /**
     * 在带命名空间的模块中的访问全局内容
     * rootState 和 rootGetters 也会通过 context 对象的属性传入 action
     */
    testActionFn ({ dispath ,commit, rootState, rootGetters }) {
      setTimeout(() => {
        commit('changeName', 'ls')
      }, 1000)
    },
    /**
    * 在带命名空间的模块中
    * 需要在全局命名空间内分发 action 或提交 mutation，将 { root: true } 作为第三参数传给 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']),  // -> 调用全局命名空间中的mutations
    ...mapMutations('user', ['SET_USER_ID']),  // -> 调用命名空间中的mutations
    ...mapMutations(['user/changeName']), // -> 调用命名空间中的mutations，  this['user/changeName']('ww')  必须以这种方式调用
    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']), // -> 调用全局命名空间中的actions
    ...mapActions('user', ['testActionFn']), // -> 调用命名空间中的actions
        
    testAction () {
      // this.$store.dispatch('increment')
      // this.increment()
      this.testActionFn()
    }
  }

五、通过使用 createNamespacedHelpers 创建基于某个命名空间辅助函数

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，还要有getters？为什么mutations中只能使用同步函数？

1. getters相当于store的计算属性，如果有多个组件需要用到此属性，可以使用getters
2. 主要是不方便debug， 这里前面触发的action中name是ls，后面触发 mutations中name状态还是zs。

image-20220428143311027.png

image-20220428143303561.png