【vuex之五大核心概念】

vuex:五大核心概念

  • 一、state状态
    • 1.state的含义
    • 2.如何访问以及使用仓库的数据
      • (1)通过store直接访问
        • 获取store对象
      • (2)通过辅助函数MapState
  • 二、mutations
    • 1.作用
    • 2.严格模式
    • 3.操作流程
      • 定义 mutations 对象,对象中存放修改 state 的方法
      • 组件通过commit调用mutations进行修改
    • 4.mutations传参
      • mutation 对象中定义带参函数
      • 提交调用 mutation
    • 5.辅助函数mapMutations
      • (1)作用
      • (2)操作步骤
  • 三、actions
    • 1.作用
    • 2.操作流程
    • 3.辅助函数mapActions
      • 作用
      • 流程
  • 四、getters
    • 1.作用
    • 2.操作流程
    • 3.辅助函数mapGetters
  • 五、module(分包管理)
    • 1.作用
    • 2.创建module模块
    • 3.直接使用模块中的数据
      • (1)方式一:直接通过模块名访问
      • (2)方式二:mapState
    • 4.使用模块中getters的数据
      • (1)方式一:直接通过模块名访问
      • (2)方式二:mapGetters
    • 5.调用模块中的mutation
      • (1)方式一:直接调用
      • (2)方式二:mapMutation
    • 6.调用模块中的actions
      • (1)方式一:直接调用
      • (2)方式二:mapAction
  • 六、总结

一、state状态

1.state的含义

是整个应用的仓库,存储共用的数据

2.如何访问以及使用仓库的数据

一般来说,都有直接访问和通过辅助函数进行访问这两种方式

(1)通过store直接访问

获取store对象
适用场景语法
Vue 组件内部访问 store 对象this.$store
普通的 js 模块中获取 store 对象import store from ‘.xxx/store’
使用数据
适用场景语法
vue模板中{{ $store.state.xxx}}
Vue组件的js逻辑代码中this.$store.state.xxx
普通的 js 模块中store.state.xxx

(2)通过辅助函数MapState

辅助函数能帮助我们简化代码,使用起来更加方便

//store下的index.js文件
const store = new Vuex.Store({state: {name:"小美“}
//在需要使用的组件内导入mapState
import { mapState } from 'vuex'
//用数组方式引入State,用展开运算符进行映射
export default {computed: mapState(['name']),}

这样,我们就可以在模板中直接使用 {{ name }} 来获取并展示 name 的值。

二、mutations

1.作用

用于修改仓库里面的数据
原因:在vuex中同样要遵循单项数据流,组件是不能直接修改仓库中的数据的,所以我们需要在用mutations修改数据

2.严格模式

因为vuex不允许组件直接修改仓库里的数据,为了避免某些错误写法可能导致无效的问题,我们可以通过开启严格模式检查问题

//store/index.js
const store =new Vuex.Store({strict:true,state:{xxxxxx}
})

3.操作流程

定义 mutations 对象,对象中存放修改 state 的方法

const store = new Vuex.Store({
state: {name:"小美”
},
// 定义mutations对象
mutations: {
// 第一个参数要求是当前store的state属性
changeName (state) {state.name:"小帅“}}
})

组件通过commit调用mutations进行修改

this.$store.commit('changeName')

4.mutations传参

mutation 对象中定义带参函数

mutations: {
changeName (state,name) {state.name:name}
}

提交调用 mutation

this.$store.commit('changeName', 小羊)

注意:传参只能传state和一个自定义的参数,不支持传多个参数,但是支持传state和一个对象/数组

5.辅助函数mapMutations

(1)作用

把mutation中定义的方法提取出来,映射在组件中的methods

(2)操作步骤

store/index文件中定义mutation对象的代码不变

//在需要使用的组件内导入mapMutations
import { mapMutations } from 'vuex'
//映射在methodss中
methods: {
...mapMutations(['changeName'])
}

就可以直接调用仓库里的方法,例如,模板里

    <button @click="changeName(‘大灰狼’)">点一下我就改名</button>

而在组件js逻辑代码块中用this.changeName(‘大灰狼’)即可调用

三、actions

1.作用

用于处理异步操作
注意:actions处理异步,mutations只能处理同步,actions中的异步操作也是在调用mutations中定义的方法

2.操作流程

下面给出一个一秒后给数组增添一个数的例子:

// store.jsstate () {return {list: []}
},
mutations = {addNumber(state, number) {state.list.push(number);}
}
actions = {async addNumberWithDelay(context,number) {setTimeout(()=>{context.commit('addNumber',number)},1000)	}
}

页面中用dispatch调用actions的方法

this.$store.dispatch('addNumberWithDelay', 666)

3.辅助函数mapActions

作用

把在actions中的方法提取出来,映射在组件中的methods方法里

流程

在需要使用的组件里直接导入:

import { mapActions } from 'vuex'
methods: {
...mapActions(['addNumberWithDelay'])
}

在组件js逻辑代码块中用this.addNumberWithDelay(666’)即可调用

四、getters

1.作用

基于state里的数据进行一些操作
类似于computed计算属性

2.操作流程

例如,我们要对state里面定义好的一个数组进行筛选,筛选得到一个全是正数的列表

// store.jsconst state = {numbers: [1, -2, 3, -4, 5]
};const getters = {positiveNumbers: state => {return state.numbers.filter(num => num > 0);}
};

在需要的组件中得到该方法筛选后的数组

 return this.$store.getters.positiveNumbers

3.辅助函数mapGetters

同样也是提取getters中的方法,映射在computed中

import { mapGetters } from 'vuex'
methods: {
...mapGetters(['positiveNumbers'])
}

在组件js逻辑代码块中用this.positiveNumbers即可调用
注意:如果是在模板中调用是{{ positiveNumbers }},具体语法在上文表格中已经提到过:点我跳转查看

五、module(分包管理)

1.作用

在 Vuex 中,使用 module 可以把 store 分割成多个小模块,每个模块都有自己的 state、mutations、actions、getters 等属性,从而使得 Vuex 管理较为复杂的应用程序变得更加方便和灵活
因为一个应用会涉及到很多板块的数据,为了防止store特别膨胀复杂,管理起来更加麻烦,所以我们需要进行拆分,这样方便后续进行维护、扩展和升级等等……

2.创建module模块

大致思路是在store文件目录下新建modules文件夹,再创建不同板块的js文件。各个板块的文件中都有属于自己的state,mutations,actions和gettters.
下面举一个user的例子:

// store/modules/user.js
const state = {userInfo: {name:‘敲代码的小乐最快乐’,isLoggedIn: false}
}
const mutations = {}
const actions = {}
const getters = {}
export default {
state,
mutations,
actions,
getters
}

接着再导入注册user板块就大功告成:

import user from './modules/user'
const store = new Vuex.Store({
modules: {
user
}
})

3.直接使用模块中的数据

当使用 Vuex 存储数据时,即使将数据拆分到不同的模块中,实际上子模块的状态仍然会被挂载在根级别的状态下,并且属性名就是模块名。

(1)方式一:直接通过模块名访问

你可以使用 $store.state.模块名.xxx 的方式直接访问模块中的数据。

(2)方式二:mapState

mapState 映射根级别的状态:mapState(['xxx'])
映射子模块的状态:子模块需要开启命名空间namespaced:true,使用mapState('模块名', ['xxx'])进行访问。

export default {
namespaced: true,
state,
mutations,
actions,
getters
}

4.使用模块中getters的数据

(1)方式一:直接通过模块名访问

你可以使用$store.getters['模块名/xxx '] 的方式直接访问

(2)方式二:mapGetters

mapGetters 映射根级别的状态:mapGetters([ 'xxx' ])
映射子模块的状态:子模块需要开启命名空间,使用mapGetters('模块名', ['xxx'])进行访问。

5.调用模块中的mutation

(1)方式一:直接调用

你可以直接通过 store 调用: $store.commit('模块名/xxx ', 额外参数)

(2)方式二:mapMutation

mapMutations 映射根级别的状态:mapMutations([ 'xxx' ])
映射子模块的状态:子模块需要开启命名空间,通过mapMutations('模块名', ['xxx']))调用。

6.调用模块中的actions

(1)方式一:直接调用

你可以直接通过 store 调用: $store.dispatch('模块名/xxx ', 额外参数)

(2)方式二:mapAction

mapActions 映射根级别的状态:mapActions([ 'xxx' ])
映射子模块的状态:子模块需要开启命名空间,通过mapActions('模块名', ['xxx']))调用。

六、总结

vuex的前四大核心概念:state、mutations、getters和actions都有自己的“mapxxx”函数,它都是把其本身的方法提取出来,以映射在组件的方式访问(state和getters是映射在computed中)或者调用(mutations和actions映射在methods中)。
最后的一个核心概念是modules,它存在的意义在于对跟级别的store进行分包管理。
关系图:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/714113.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Freesia 项目引用的依赖

UML图 项目总依赖 <parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.7.0</version> </parent> <groupId>com.freesia</groupId> <artifa…

计算机网络_2.1 物理层概述

2.1 物理层概述 一、物理层要实现的功能二、物理层接口特性 B站 深入浅出计算机网络 2.1物理层概述 一、物理层要实现的功能 物理层要实现的功能就是在各种传输媒体上传输比特0和1&#xff0c;进而给上面的数据链路层提供透明传输比特流的服务。 数据链路层“看不见”&#xff…

剑指offer面试题22:链表中倒数第k个节点

面试题22&#xff1a;链表中倒数第k个节点 题目&#xff1a; 实现一种算法&#xff0c;找出单向链表中倒数第 k 个节点。返回该节点的值。 示例&#xff1a; 输入&#xff1a; 1->2->3->4->5 和 k 2 输出&#xff1a; 4思路&#xff1a; 1、求倒数第k个节点的…

设计模式-命令模式(Command Pattern)

承接Qt/C软件开发项目&#xff0c;高质量交付&#xff0c;灵活沟通&#xff0c;长期维护支持。需求所寻&#xff0c;技术正适&#xff0c;共创完美&#xff0c;欢迎私信联系&#xff01; 一、命令模式的说明 命令模式&#xff08;Command Pattern&#xff09;是一种行为设计模式…

跨境代购系统独立站:掌握核心竞争优势,打造专业国际购物体验

跨境代购系统独立站&#xff08;获取代购系统独立站演示&#xff09;的核心竞争优势可能包括&#xff1a; 独立性&#xff1a;独立站不依赖于任何第三方电商平台&#xff0c;拥有自己的域名和网站空间&#xff0c;可以自主控制网站的设计和内容。灵活性&#xff1a;独立站不受…

springboot基于web的网上摄影工作室的开发与实现论文

网上摄影工作室 摘要 随着信息技术在管理上越来越深入而广泛的应用&#xff0c;管理信息系统的实施在技术上已逐步成熟。本文介绍了网上摄影工作室的开发全过程。通过分析网上摄影工作室管理的不足&#xff0c;创建了一个计算机管理网上摄影工作室的方案。文章介绍了网上摄影工…

微信小程序云开发教程——墨刀原型工具入门(动态组件)

引言 作为一个小白&#xff0c;小北要怎么在短时间内快速学会微信小程序原型设计&#xff1f; “时间紧&#xff0c;任务重”&#xff0c;这意味着学习时必须把握微信小程序原型设计中的重点、难点&#xff0c;而非面面俱到。 要在短时间内理解、掌握一个工具的使用&#xf…

0基础跨考计算机|408保姆级全年计划

我也是零基础备考408&#xff01; 虽说是计算机专业&#xff0c;但是本科一学期学十几门,真的期末考试完脑子里什么都不进的...基本都是考前一周发疯学完水过考试...&#x1f605; 想要零基础跨考可以直接从王道开始&#xff01;跟教材一点一点啃完全没必要&#x1f978; 现在…

八股文打卡day25——数据库(2)

面试题&#xff1a;讲一下事务的四大特性&#xff1f; 我的回答&#xff1a; ACID A代表原子性&#xff0c;一个事务代表一个业务&#xff0c;要么全部都完成&#xff0c;要么全部都不完成。如果事务执行失败了&#xff0c;会回滚到最原来的状态。 C代表一致性&#xff0c;举…

【STM32】江科大STM32学习笔记汇总(50)

00. 目录 文章目录 00. 目录01. STM32学习笔记汇总02. 相关资料下载03. 附录 01. STM32学习笔记汇总 【STM32】STM32学习笔记-课程简介(01) 【STM32】STM32学习笔记-STM32简介(02) 【STM32】STM32学习笔记-软件安装(03) 【STM32】STM32学习笔记-新建工程(04) 【STM32】STM…

venv、pip、conda、anaconda、miniconda的区别和优缺点,和彻底清除python多余的环境

virtualenv(venv) 这是一个虚拟环境管理器&#xff0c;它可以让你每个项目甚至每个脚本配置一个自定义的Python解释器环境&#xff0c;这最大的好处是我可以不污染开发环境。​ pip pip 是 Python 最常用的包管理器&#xff0c;它能自动处理依赖 。 conda 如果说venv是虚拟…

CSS特性

小技巧&#xff1a;在调试工具中&#xff0c;css样式上看层叠&#xff0c;下看继承。 1、层叠性 相同的属性会被覆盖&#xff0c;不同的属性会叠加 2、继承性 3、优先级 基于不同种类的选择器的匹配规则。 通配符 < 标签 < 类选择器 < id选择器 < 行内样式 <…

大语言模型(LLM)技术名词表(一)

LLMs on a Phone&#xff1a;指在手机设备上运行的大型语言模型。 Scalable Personal AI&#xff1a;指用户可以在个人设备上对AI模型进行微调的技术。 Responsible Release&#xff1a;发布AI模型时考虑社会、法律和伦理影响的做法。 Multimodality&#xff1a;AI模型能处理…

一起玩儿平衡车(ESP32)——02 平衡车的组装与接线方法

摘要&#xff1a;本文介绍平衡车的组装与接线方法 前边介绍了所要实现的平衡车的组成&#xff0c;接下来就来把小车组装起来。首先是下层底板的底面要固定两个轮子。这个只要固定孔位没有问题&#xff0c;用螺丝直接将轮子支架固定上去就可以了。固定好后如下图所示&#xff1…

基础小白快速入门c语言--

变量&#xff1a; 表面理解&#xff1a;在程序运行期间&#xff0c;可以改变数值的数据&#xff0c; 深层次含义&#xff1a;变量实质上代表了一块儿内存区域&#xff0c;我们可以将变量理解为一块儿内存区域的标识&#xff0c;当我们操作变量时&#xff0c;相当于操作了变量…

代码随想录算法训练营Day38|509. 斐波那契数、70. 爬楼梯、746. 使用最小花费爬楼梯

509. 斐波那契数 题目链接&#xff1a;509. 斐波那契数 文档链接&#xff1a;509. 斐波那契数 视频链接&#xff1a;手把手带你入门动态规划 | LeetCode&#xff1a;509.斐波那契数 C实现 class Solution { public:int fib(int n) {if(n 0) return 0;if(n 1) return 1;int a…

罐头鱼AI传单功能操作说明|二次剪辑创作|AI智剪|批量剪辑视频

罐头鱼AI传单功能操作说明 1. 首页显示 账号登录状态 可绑定账号数量 已绑定账号数量 已绑定账号显示 显示最近上传视频素材 显示新上传素材列表 QQ:290615413 2. 抖音账号绑定功能 显示登录账号 已绑定账号 可绑定账号数量 可授权绑定抖音账号 3. 账号管理列表 显…

Netty5 入门HelloWorld

一、客户端代码及关键类说明 /*** netty5的客户端* author -zhengzx-**/ public class ClientSocket {public static void main(String[] args) {//服务类Bootstrap bootstrap new Bootstrap();//workerEventLoopGroup worker new NioEventLoopGroup();try {//设置线程池boo…

RC正弦波振荡电路

RC正弦波振荡电路 RC正弦波振荡电路又称文氏电桥振荡电路&#xff0c;可以设计频率为f1/2πRC的正弦波发生器。 RC正弦波振荡电路设计&#xff1a;50Hz,振幅为3.47V 电路分析&#xff1a; 1.起振条件取决于R1, R4&#xff0c;R2与1N4148并联电阻&#xff08;下面简称Rf&#…

B端系统:OA界面设计,把用户当傻瓜吧, 少让用户吃瓜

OA系统是稍具规模的企业最常用的系统&#xff0c;有些OA系统体验非常逆天&#xff0c;把用户当成了吃瓜群众&#xff0c;看看热闹还行&#xff0c;一旦上手操作就抓瞎了&#xff0c;大千UI工场结合自身经验对这个问题进行分析&#xff0c;希望可以抛砖引玉。 一、OA概述 OA系…