mapActions辅助函数 #

简介 #

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

基本用法 #

数组语法 #

javascript

import { mapActions } from 'vuex'

export default {
  methods: {
    ...mapActions([
      'fetchUser',
      'login',
      'logout'
    ])
  }
}

// 使用
this.fetchUser(1)
this.login({ username, password })
this.logout()

对象语法 #

javascript

import { mapActions } from 'vuex'

export default {
  methods: {
    ...mapActions({
      loadUser: 'fetchUser',
      signIn: 'login',
      signOut: 'logout'
    })
  }
}

// 使用
this.loadUser(1)
this.signIn({ username, password })
this.signOut()

使用场景 #

场景一：简单映射 #

vue

<template>
  <div>
    <button @click="fetchProducts">Load Products</button>
    <button @click="clearCart">Clear Cart</button>
  </div>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  methods: {
    ...mapActions([
      'fetchProducts',
      'clearCart'
    ])
  }
}
</script>

场景二：传递参数 #

vue

<template>
  <div>
    <input v-model="userId" type="number" />
    <button @click="fetchUser(userId)">Load User</button>
  </div>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  data() {
    return {
      userId: 1
    }
  },
  
  methods: {
    ...mapActions(['fetchUser'])
  }
}
</script>

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

vue

<template>
  <div>
    <button @click="storeFetch">Fetch from Store</button>
    <button @click="localFetch">Fetch Locally</button>
  </div>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  methods: {
    ...mapActions({
      storeFetch: 'fetchData'
    }),
    
    localFetch() {
      // 本地方法
    }
  }
}
</script>

模块中的使用 #

命名空间模块 #

javascript

import { mapActions } from 'vuex'

export default {
  methods: {
    // 指定模块命名空间
    ...mapActions('user', [
      'fetchProfile',
      'updateProfile',
      'logout'
    ]),
    
    ...mapActions('cart', [
      'addToCart',
      'removeFromCart',
      'checkout'
    ])
  }
}

使用 createNamespacedHelpers #

javascript

import { createNamespacedHelpers } from 'vuex'

const { mapActions } = createNamespacedHelpers('user')

export default {
  methods: {
    // 直接映射，无需指定模块名
    ...mapActions([
      'fetchProfile',
      'updateProfile',
      'logout'
    ])
  }
}

重命名模块 Action #

javascript

import { mapActions } from 'vuex'

export default {
  methods: {
    ...mapActions('user', {
      loadProfile: 'fetchProfile',
      saveProfile: 'updateProfile'
    }),
    
    ...mapActions('cart', {
      add: 'addToCart',
      remove: 'removeFromCart'
    })
  }
}

与其他辅助函数配合 #

完整示例 #

vue

<template>
  <div>
    <p>User: {{ userName }}</p>
    <p>Cart: {{ cartCount }} items</p>
    
    <button @click="fetchUser(userId)">Load User</button>
    <button @click="addToCart(product)">Add to Cart</button>
    <button @click="logout">Logout</button>
  </div>
</template>

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

export default {
  data() {
    return {
      userId: 1,
      product: { id: 1, name: 'Product', price: 100 }
    }
  },
  
  computed: {
    ...mapState('user', ['profile']),
    ...mapGetters('user', ['userName']),
    ...mapGetters('cart', ['cartCount'])
  },
  
  methods: {
    // User actions
    ...mapActions('user', [
      'fetchUser',
      'logout'
    ]),
    
    // Cart actions
    ...mapActions('cart', [
      'addToCart'
    ])
  }
}
</script>

组合式 API 中使用 #

封装 mapActions #

javascript

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

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

使用封装 #

vue

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

export default {
  setup() {
    const { fetchUser, login, logout } = useMapActions([
      'fetchUser',
      'login',
      'logout'
    ])
    
    const { loadProfile, saveProfile } = useMapActions({
      loadProfile: 'user/fetchProfile',
      saveProfile: 'user/updateProfile'
    })
    
    return {
      fetchUser,
      login,
      logout,
      loadProfile,
      saveProfile
    }
  }
}
</script>

处理 Promise #

async/await #

vue

<script>
import { mapActions } from 'vuex'

export default {
  methods: {
    ...mapActions(['fetchUser', 'login']),
    
    async handleLogin() {
      try {
        await this.login({
          username: this.username,
          password: this.password
        })
        
        await this.fetchUser()
        
        this.$router.push('/dashboard')
      } catch (error) {
        this.error = error.message
      }
    }
  }
}
</script>

Promise 链 #

vue

<script>
import { mapActions } from 'vuex'

export default {
  methods: {
    ...mapActions(['fetchUser', 'fetchPosts']),
    
    loadData() {
      this.fetchUser(1)
        .then(user => {
          return this.fetchPosts(user.id)
        })
        .then(posts => {
          console.log('Posts loaded:', posts)
        })
        .catch(error => {
          console.error('Error:', error)
        })
    }
  }
}
</script>

最佳实践 #

1. 合理命名 #

javascript

// 推荐：语义化命名
methods: {
  ...mapActions({
    loadUserProfile: 'user/fetchProfile',
    saveUserProfile: 'user/updateProfile',
    addItemToCart: 'cart/addItem'
  })
}

// 不推荐：模糊命名
methods: {
  ...mapActions({
    load: 'user/fetchProfile',
    save: 'user/updateProfile'
  })
}

2. 按模块组织 #

javascript

methods: {
  // User module
  ...mapActions('user', [
    'fetchProfile',
    'updateProfile',
    'logout'
  ]),
  
  // Cart module
  ...mapActions('cart', [
    'addToCart',
    'removeFromCart',
    'checkout'
  ]),
  
  // Products module
  ...mapActions('products', [
    'fetchProducts',
    'searchProducts'
  ])
}

3. 区分 Mutation 和 Action #

javascript

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

常见问题 #

1. Action 不存在 #

javascript

// 问题：映射不存在的 action
...mapActions(['nonExistent'])  // 调用时会报错

// 解决：确保 action 已定义
actions: {
  nonExistent(context) {
    // ...
  }
}

2. 命名冲突 #

javascript

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

// 解决：重命名
methods: {
  fetchUser() {
    console.log('local')
  },
  ...mapActions({
    storeFetchUser: 'fetchUser'
  })
}

3. 模块命名空间问题 #

javascript

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

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

总结 #

mapActions 使用要点：

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

继续学习 Module基础，了解如何模块化管理状态。