mapMutations辅助函数 #

简介 #

mapMutations 辅助函数将 store 中的 mutation 映射到组件的 methods 中，简化 mutation 的调用。

基本用法 #

数组语法 #

javascript

import { mapMutations } from 'vuex'

export default {
  methods: {
    ...mapMutations([
      'INCREMENT',
      'DECREMENT',
      'SET_COUNT'
    ])
  }
}

// 使用
this.INCREMENT()
this.DECREMENT()
this.SET_COUNT(10)

对象语法 #

javascript

import { mapMutations } from 'vuex'

export default {
  methods: {
    ...mapMutations({
      add: 'INCREMENT',
      subtract: 'DECREMENT',
      set: 'SET_COUNT'
    })
  }
}

// 使用
this.add()
this.subtract()
this.set(10)

使用场景 #

场景一：简单映射 #

vue

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="INCREMENT">+1</button>
    <button @click="DECREMENT">-1</button>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  computed: {
    ...mapState(['count'])
  },
  
  methods: {
    ...mapMutations(['INCREMENT', 'DECREMENT'])
  }
}
</script>

场景二：重命名避免冲突 #

vue

<template>
  <div>
    <button @click="incrementStore">Store +1</button>
    <button @click="incrementLocal">Local +1</button>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'

export default {
  data() {
    return {
      localCount: 0
    }
  },
  
  methods: {
    ...mapMutations({
      incrementStore: 'INCREMENT'
    }),
    
    incrementLocal() {
      this.localCount++
    }
  }
}
</script>

场景三：传递参数 #

vue

<template>
  <div>
    <input v-model="newCount" type="number" />
    <button @click="SET_COUNT(Number(newCount))">Set Count</button>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'

export default {
  data() {
    return {
      newCount: 0
    }
  },
  
  methods: {
    ...mapMutations(['SET_COUNT'])
  }
}
</script>

模块中的使用 #

命名空间模块 #

javascript

import { mapMutations } from 'vuex'

export default {
  methods: {
    // 指定模块命名空间
    ...mapMutations('user', [
      'SET_USER',
      'CLEAR_USER'
    ]),
    
    ...mapMutations('cart', [
      'ADD_ITEM',
      'REMOVE_ITEM',
      'CLEAR_CART'
    ])
  }
}

使用 createNamespacedHelpers #

javascript

import { createNamespacedHelpers } from 'vuex'

const { mapMutations } = createNamespacedHelpers('user')

export default {
  methods: {
    // 直接映射，无需指定模块名
    ...mapMutations([
      'SET_USER',
      'CLEAR_USER'
    ])
  }
}

重命名模块 Mutation #

javascript

import { mapMutations } from 'vuex'

export default {
  methods: {
    ...mapMutations('user', {
      setUser: 'SET_USER',
      clearUser: 'CLEAR_USER'
    }),
    
    ...mapMutations('cart', {
      addToCart: 'ADD_ITEM',
      removeFromCart: 'REMOVE_ITEM'
    })
  }
}

与其他辅助函数配合 #

完整示例 #

vue

<template>
  <div>
    <p>User: {{ userName }}</p>
    <p>Cart: {{ cartCount }} items</p>
    
    <button @click="SET_LOADING(true)">Loading</button>
    <button @click="clearCart">Clear Cart</button>
    <button @click="logout">Logout</button>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState(['loading']),
    ...mapGetters('user', ['userName']),
    ...mapGetters('cart', ['cartCount'])
  },
  
  methods: {
    // Mutations
    ...mapMutations(['SET_LOADING']),
    ...mapMutations('cart', {
      clearCart: 'CLEAR_CART'
    }),
    
    // Actions
    ...mapActions('user', ['logout'])
  }
}
</script>

组合式 API 中使用 #

封装 mapMutations #

javascript

// composables/useMapMutations.js
import { useStore } from 'vuex'

export function useMapMutations(mapper) {
  const store = useStore()
  const result = {}
  
  if (Array.isArray(mapper)) {
    mapper.forEach(name => {
      result[name] = (payload) => store.commit(name, payload)
    })
  } else {
    Object.keys(mapper).forEach(key => {
      result[key] = (payload) => store.commit(mapper[key], payload)
    })
  }
  
  return result
}

使用封装 #

vue

<script>
import { useMapMutations } from '@/composables/useMapMutations'

export default {
  setup() {
    const { INCREMENT, DECREMENT, SET_COUNT } = useMapMutations([
      'INCREMENT',
      'DECREMENT',
      'SET_COUNT'
    ])
    
    const { setUser, clearUser } = useMapMutations({
      setUser: 'user/SET_USER',
      clearUser: 'user/CLEAR_USER'
    })
    
    return {
      INCREMENT,
      DECREMENT,
      SET_COUNT,
      setUser,
      clearUser
    }
  }
}
</script>

最佳实践 #

1. 合理命名 #

javascript

// 推荐：语义化命名
methods: {
  ...mapMutations({
    setUserProfile: 'SET_USER',
    clearUserData: 'CLEAR_USER'
  })
}

// 不推荐：模糊命名
methods: {
  ...mapMutations({
    setData: 'SET_USER',
    clear: 'CLEAR_USER'
  })
}

2. 按模块组织 #

javascript

methods: {
  // User module
  ...mapMutations('user', ['SET_USER', 'CLEAR_USER']),
  
  // Cart module
  ...mapMutations('cart', ['ADD_ITEM', 'REMOVE_ITEM']),
  
  // UI module
  ...mapMutations('ui', ['SET_LOADING', 'SET_ERROR'])
}

3. 区分 Mutation 和 Action #

javascript

methods: {
  // Mutations - 同步操作
  ...mapMutations({
    setLoading: 'SET_LOADING',
    setError: 'SET_ERROR'
  }),
  
  // Actions - 异步操作
  ...mapActions({
    fetchUser: 'fetchUser',
    login: 'login'
  })
}

常见问题 #

1. Mutation 不存在 #

javascript

// 问题：映射不存在的 mutation
...mapMutations(['NON_EXISTENT'])  // 调用时会报错

// 解决：确保 mutation 已定义
mutations: {
  NON_EXISTENT(state) {
    // ...
  }
}

2. 命名冲突 #

javascript

// 问题：与组件方法冲突
export default {
  methods: {
    increment() {
      console.log('local')
    },
    ...mapMutations(['increment'])  // 冲突
  }
}

// 解决：重命名
methods: {
  increment() {
    console.log('local')
  },
  ...mapMutations({
    storeIncrement: 'increment'
  })
}

3. 模块命名空间问题 #

javascript

// 问题：忘记命名空间
...mapMutations(['SET_USER'])  // 找不到

// 解决：添加命名空间
...mapMutations('user', ['SET_USER'])

总结 #

mapMutations 使用要点：

语法	使用场景	示例
数组语法	名称相同	`...mapMutations(['INCREMENT'])`
对象语法	重命名	`...mapMutations({ add: 'INCREMENT' })`
命名空间	模块映射	`...mapMutations('user', ['SET_USER'])`

继续学习 Mutation规则，了解必须遵守的规则。