【VUEX】state、mutations、actions、getters、modules以及辅助函数mapState和mapGetters

Vuex是一个用于管理Vue应用状态的库,它提供了state、mutations、actions、getters和modules等核心属性,以及mapState和mapGetters辅助函数,便于组件与全局状态交互。通过commit来同步改变state,actions处理异步操作,而modules则支持模块化,提升应用的可维护性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Vuex

简介:vuex是vue.js的状态管理库

提供一种集中式存储管理应用程序中的所有组件的状态,并将其分离到一个可预测的状态容器中。

五个核心属性:state、mutations、actions、getters、modules
属性作用
state存放状态(数据),所有组件共享
mutations唯一可以修改state的地方,改变state状态需要通过显示地commit(提交)mutation(同步)
actions用于异步操作提交mutations,根据后端接口返回数据去commit更新数据
getters获取state中的状态
modules将store分割成模块,每个模块都拥有自己的state、mutation、action、getters和子模块,以便提高应用程序的可维护性
两个辅助函数:mapState、mapGetters
属性作用用法
mapState将 store 中的 state 映射到局部计算属性computed: {…mapState([‘count’, ‘xx’]),}
mapGetters将 store 中的 getter 映射到局部计算属性computed: {…mapGetters([‘count’, ‘xx’]),}

当一个组件需要获取多个状态的时候,可以使用 mapState或mapGetters 辅助函数帮助我们生成计算属性,减少冗余代码:

// store 中的 state、getter 映射到局部计算属性
import { mapState, mapGetters } from 'vuex'; 
computed: {
  // 使用对象展开运算符将此对象混入到外部对象中
  ...mapState(['count']),
  ...mapGetters(['count']),
  localComputed () { /* ... */ },
}

可以通过 this.$store 访问store实例,从Store中读取state(状态),改变state状态需要通过显示地commit(提交)mutation;

//当有modules模块化时要注意提交commit需要加上文件名
this.$store.commit('app/SET_COUNT', 10)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值