Vue-vuex 核心概念和 API

一、前言

Vuex 是 Vue 官方推荐的状态管理模式,适用于中大型 Vue 应用程序的全局状态管理。它通过集中式的 Store 管理组件之间的共享数据,使得状态变更更加可预测和易于维护。

本文将带你深入了解 Vuex 的五大核心概念(State、Getter、Mutation、Action、Module)以及常用的 API 方法,帮助你从基础到进阶掌握 Vuex 的使用方式。

二、Vuex 的五大核心概念

Vuex 主要由五个核心部分组成:

模块类型描述
State数据源存储应用的状态数据
Getter计算属性对 state 进行派生计算
Mutation同步方法唯一能修改 state 的方式
Action异步方法提交 mutation,处理异步操作
Module分割模块将 store 拆分为多个模块,便于组织

1. State:存储状态数据

state 是 Vuex 中最基础的数据仓库,用于保存应用程序中的共享状态。

state: {
  count: 0,
  user: null,
  todos: []
}

📌 使用方式:

  • 组件中通过 this.$store.state.count 获取;
  • 推荐结合 mapState 辅助函数简化写法。
import { mapState } from 'vuex'

computed: {
  ...mapState(['count'])
}

2. Getter:派生状态(类似 computed)

getter 用于对 state 进行加工处理,类似于 Vue 的 computed 属性。

getters: {
  doubleCount(state) {
    return state.count * 2
  },
  doneTodos(state) {
    return state.todos.filter(todo => todo.done)
  }
}

📌 使用方式:

import { mapGetters } from 'vuex'

computed: {
  ...mapGetters(['doubleCount', 'doneTodos'])
}

3. Mutation:同步更改状态的方法

mutation 是唯一允许修改 state 的地方,必须是同步函数。

mutations: {
  increment(state) {
    state.count++
  },
  setUser(state, user) {
    state.user = user
  }
}

📌 使用方式:

this.$store.commit('increment')

或使用 mapMutations

import { mapMutations } from 'vuex'

methods: {
  ...mapMutations(['increment', 'setUser'])
}

4. Action:异步操作状态的方法

action 用于处理异步逻辑,如请求接口、定时器等,最终通过提交 mutation 来改变状态。

actions: {
  async fetchUser({ commit }, userId) {
    const res = await getUserById(userId)
    commit('setUser', res.data)
  },
  incrementAsync({ commit }) {
    setTimeout(() => {
      commit('increment')
    }, 1000)
  }
}

📌 使用方式:

this.$store.dispatch('fetchUser', 1)

或使用 mapActions

import { mapActions } from 'vuex'

methods: {
  ...mapActions(['fetchUser', 'incrementAsync'])
}

5. Module:模块化组织 Store

当项目变大时,我们可以将 store 拆分成多个模块(module),每个模块拥有自己的 state、getter、mutation 和 action。

modules: {
  userModule,
  cartModule
}

模块示例:

// modules/userModule.js
export default {
  namespaced: true,
  state: () => ({
    userInfo: null
  }),
  mutations: {
    setUserInfo(state, info) {
      state.userInfo = info
    }
  },
  actions: {
    fetchUserInfo({ commit }) {
      // ...
      commit('setUserInfo', data)
    }
  }
}

📌 使用带命名空间的模块:

dispatch('userModule/fetchUserInfo', null, { root: true })
commit('userModule/setUserInfo', info, { root: true })

三、Vuex 的常用 API 方法汇总

API 名称描述
$store.state.xxx获取状态值
$store.getters.xxx获取计算后的状态值
$store.commit('type', payload)触发 mutation
$store.dispatch('type', payload)触发 action
$store.registerModule(path, module)动态注册模块
$store.unregisterModule(path)动态卸载模块
mapStatemapGettersmapMutationsmapActions辅助函数,简化写法

四、辅助函数(mapXXX)详解

为了减少重复代码,Vuex 提供了四个常用的辅助函数,它们都位于 vuex 包中。

1. mapState

将 store 的 state 映射为计算属性。

import { mapState } from 'vuex'

computed: {
  ...mapState(['count', 'user'])
}

等价于:

computed: {
  count() {
    return this.$store.state.count
  },
  user() {
    return this.$store.state.user
  }
}

2. mapGetters

将 store 的 getter 映射为计算属性。

import { mapGetters } from 'vuex'

computed: {
  ...mapGetters(['doubleCount', 'doneTodos'])
}

3. mapMutations

将 store 的 mutation 映射为 methods。

import { mapMutations } from 'vuex'

methods: {
  ...mapMutations(['increment', 'setUser'])
}

4. mapActions

将 store 的 action 映射为 methods。

import { mapActions } from 'vuex'

methods: {
  ...mapActions(['fetchUser', 'incrementAsync'])
}

五、动态模块注册与卸载

在某些场景下,我们需要在运行时动态添加或移除模块。

✅ 注册模块

store.registerModule('userModule', userModule)

✅ 卸载模块

store.unregisterModule('userModule')

📌 注意:注册后可以通过 root: true 调用模块中的方法。

六、Vuex 在 Vue 2 与 Vue 3 中的区别

特性Vue 2(Vuex 3)Vue 3(Vuex 4)
创建 Store 方式new Vuex.Store({})createStore({})
使用方式Vue.use(Vuex)app.use(store)
Composition API 支持需配合 useStore原生支持组合式 API
TypeScript 支持支持更好地支持
推荐程度✅ 旧项目可用✅ 新项目推荐使用

七、Vuex 最佳实践建议

建议说明
不直接修改 state必须通过 mutation 修改
Mutation 必须同步Action 才能执行异步逻辑
合理拆分模块避免 store 太臃肿
使用命名空间模块化时启用 namespace 提高可维护性
封装 map 辅助函数提高代码简洁性和可读性
配合 Vue Devtools查看状态变化、调试更高效
不滥用 Vuex小型项目可考虑使用 reactive / ref 替代

八、总结对比表

概念是否同步是否可直接修改 state是否推荐使用
State
Getter
Mutation✅(唯一方式)
Action✅(内部异步)❌(通过提交 mutation 修改)
Module✅(大项目必备)

九、结语

感谢您的阅读!如果你有任何疑问或想要分享的经验,请在评论区留言交流!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值