Vue ---- 状态管理

最新推荐文章于 2025-02-17 22:21:05 发布

原创最新推荐文章于 2025-02-17 22:21:05 发布 · 891 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

本文介绍了Vuex作为Vue.js应用的状态管理库，通过集中式数据管理实现一处修改，多处更新。文章详细讲解了Vuex的组成部分，如Store类、map系列函数、actions、mutations和getters。组件通过dispatch触发actions，commit提交mutations来改变state，而getters则用于处理和计算状态。Vuex的配置过程包括创建plugins文件夹和引入Vue插件。文章强调了组件、actions、mutations和state的角色分工，并展示了如何在组件中使用map系列函数进行通讯。

介绍：集中式数据管理, 一处修改，多处使用，多个组件依赖于同一状态，来自不同组件的行为需要变更同一状态，生态环境给我们提供了官方插件vuex

1.npm i vuex -S

2 import Vuex from "vuex" 打印console.log(Vuex) 得到Vuex 里的东西，Vuex 是个对象

里面有 store 类，map系列函数，通讯工具

1.store 类打造状态管理实例挂到vue根身上，控制整个vue应用的数据

2.map系列函数，通讯工具：mapActions，mapMutations，mapGetters，mapState

3.配置 (插件) 类似于路由配置，创建plugins文件，里面有个vuex.js

vue插件，引入vue，安装插件,打造 vuex实例，vuex里有个类Store ,new 创造实例，将状态管理实例暴露出去，在main.js中引入，挂载到vue身上

4.角色分工： component,actions ，mutations ，state , getters

5.component 组件发送请求，

dispatch (实例方法) ====》 actions

mapActions(函数，通讯工具) ====> actions

mapMutations (函数，通讯工具) ====> mutations

commit (实例方法，通讯工具) ====> mutations

6.actions 做同步异步的业务 commit 实例方法，通讯工具

commit (实例方法，通讯工具) ====> mutations

7.mutations 修改状态，突变 state.key=value

8.state 状态 {key:value} ，数据

9.getters （类似于放在外部的计算属性）读取处理状态（数据重新计算）想要渲染时找getters

10.component 准备在组件中渲染拿数据，想要渲染时找getters，getters找state拿再给component

mapGetters(函数，通讯工具) =====》 getters

mapState(函数，通讯工具) =====》state 直接拿数据

例属state =====>state 拿数据 {{$store.state.count}} 直接拿数据

注意：

实例方法（dispatch， commit ）：是实例身上的，所以调用实例方法要先用实例 this.$store.commit

函数，通讯工具（mapMutations ，mapActions，mapGetters，mapState）：函数，调用vuex这个对象

import {mapGetters,mapState,mapActions,mapMutations} from 'vuex'

methods:mapActions(['jia','jian','odd','redDate'])

1. import Vuex from 'vuex'， Vuex是个对象，相关成员如下

成员	用途
Store	类，构造状态管理的实例
mapActions	函数，通讯工具
mapMutations	函数，通讯工具
mapGetters	函数，通讯工具
mapState	函数，通讯工具

2. 状态管理实例 this.$store相关成员

let store = new Vuex.Store({ //打造状态管理实例
   // 角色目录
   // state:{},// actions:{},// mutations:{},// getters:{}
   state,actions,mutations,getters
})
export default store //将实例暴露出去

成员	用途
dispatch	实例方法，通讯工具
commit	实例方法，通讯工具
state	属性，获取公共数据放所有数据的地方

3.角色分工

component（组件）->	actions->	mutations->	state	<-getters（放在外部的计算属性，可以嵌套到组件内部供组件使用）->	->component
发送请求$store发送请求	同步,异步业务	修改状态突变	状态	读取处理状态	渲染状态
学生	代课老师	校长	财务	班主任	学生
dispatch	commit	state.key=value	{key:value}	state.key	{{key}}
mapActions->					<-mapGetters
mapMutations->	-------->			<------------	<-mapState
commit->	------->
				<------------	<-例属state