mapState(辅助函数)

本文深入解析Vuex状态管理的三大核心:state、view、actions。阐述了Vuex如何通过store实现响应式状态管理,确保组件高效更新。探讨了state、getters、mutations和actions的作用及使用方法,以及模块化在团队协作中的优势。

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

  1. 状态管理分为三部分:state、view、actions。整个vuex核心是store,vuex的状态是响应式的,当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新。不能直接更改store中的状态,改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。

  2. state:从store实例中读取状态的最简单方法是在计算书型中返回某个值。vuex通过store将状态从根组件“注入”到每个子组件中

当组件需要获取多个状态时,使用mapState辅助函数生成计算属性。

  1. Getters:从state派生出的状态。(比如对数据进行加减运算、过滤等操作),使用mapGetters

  2. Mutation:提交mutation是更改vuex的store中状态的唯一方式,必须同步。store.commit(’’)

  3. Action类似于mutation,两点不同:

1)Action提交的是mutation,而不是直接变更的状态

2)Action可以包含任意异步操作

action通过store.dispatch触发,通过context.commit提交状态,通过context.state和context.getter获取state和getters

  1. Modules:将store分割成模块

State
单一状态树
Vuex 用一个对象就包含了全部的应用层级状态。
作为唯一数据源,每个应用将仅仅包含一个 store 实例。
单状态树、模块化、状态、状态变更事件分布
由于 Vuex 的状态存储是响应式的,从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态:

computed: {
    count: function () {
		return this.$store.state.count
	}
}
每当 this.$store.state.count 变化的时候, 都会重新求取计算属性,并且触发更新相关联的 DOM。
state在vuex中的定位类似于data在vue中的定位:state(vuex) ≈ data (vue)
都是用于存储一些数据,或者说状态值.这些值都将被挂载 数据和dom的双向绑定事件。

也就是当你改变值的时候可以触发dom的更新.

state在使用的时候一般被挂载到子组件的computed计算属性上,这样有利于state的值发生改变的时候及时响应给子组件.
当然使用data去接收$store.state也可以接收到值,但由于这只是一个简单的赋值操作,
因此state中的状态改变的时候不能被vue中的data监听到。

mapState 辅助函数
当一个组件需要获取多个状态时候,将这些状态都声明为计算属性会有些重复和冗余。
mapState是state的语法糖,辅助函数帮助生成计算属性。

mapState(辅助函数)
数组写法(一般情况下不用)
在这里插入图片描述
mapState(辅助函数)
第二种写法 对象写法(经常用)在这里插入图片描述

数组写法在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

还有一张图

在这里插入图片描述
console.logconsole

modules:
关于a的命名互不冲突
作用于多人协作开发
在这里插入图片描述
namespaced:true在这里插入图片描述
当导出子模块的时候切记加一个namespaced:true作用是可以使当时模块的数据私有化在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值