当前位置: 首页 > news >正文

vuex的原理和使用方法

简介

Vuex 是 Vue.js 应用的状态管理模式,它为应用内的所有组件提供集中式的状态(数据)管理。可以帮我们管理 Vue 通用的数据 (多组件共享的数据)。

Vuex的构成 

  • state:state 是 Vuex 的数据中心,也就是说state是用来存储数据的。

  • getters:state 对象读取方法。Vue Components 通过该方法读取全局 state 对象。

  • mutations:状态改变操作方法。 是 Vuex 修改 state 的唯一推荐方法,其他修改方式在严格模式下将会报错。 该方法只能进行同步操作, 且方法名只能全局唯一。 操作之中会有一些 hook 暴露出来, 以进行state 的监控等。

  • actions:操作行为处理模块。 负责处理 Vue Components 接收到的所有交互行为包含同步/异步操作, 支持多个同名方法, 按照注册的顺序依次触发。 向后台 API 请求的操作就在这个模块中进行, 包括触发其他 action 以及提交 mutation 的操作。 该模块提供了 Promise的封装, 以支持 action 的链式触发。

  • modules:将 Store 分割成模块,每个模块拥有自己的 State、Getters、Mutations Actions。

 Vuex的使用

1、安装         Vuex:npm install vuex

2、创建store示例

store对象

import Vue from 'vue';
import Vuex from 'vuex';Vue.use(Vuex);export default new Vuex.Store({state: {count: 0},mutations: {increment(state) {state.count++;}},actions: {increment({ commit }) {commit('increment');}},getters: {count: state => state.count}
});

在 Vue 根实例中注册store

import Vue from 'vue';
import App from './App.vue';
import store from './store';new Vue({store,render: h => h(App)
}).$mount('#app');

在组件中使用 Store

export default {computed: {count() {return this.$store.state.count;}},methods: {increment() {this.$store.dispatch('increment');}}
};

 使用Vuex内容扩展

在真正开发中使用vuex时会有好多细节知识和注意事项,下面我们扩展一下,仅供参看

 Vue 组件中获得 Vuex 状态(State) 

方式一 this.$store.state获取

通过在根实例中注册 store 选项,该 store 实例会注入到根组件下的所有子组件中,且子组件能通过 this.$store 访问到

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

 方式二mapState 辅助函数获取(推荐)

当一个组件需要获取多个状态时候,将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题,我们可以使用 mapState 辅助函数帮助我们生成计算属性

<template><div>{{count}}</div>
</template>
<script>
import { mapState }from 'vuex
export default{computed:{...mapstate(['count'])}
}
</script>

Getter的定义和获取方式

定义getters:

需要显示所有大于5的数据,正常的方式,是需要list在组件中进行再一步的处理,但是getters可以帮助我们实现它

【下面getters引用的state中的数据:list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]】

getters: {// getters函数的第一个参数是 state// 必须要有返回值filterList:  state =>  state.list.filter(item => item > 5)
}

获取getters:

方式一: 通过属性访问

this.$store.getters.filterList

方式二:辅助函数 - mapGetters 

<template><div>{{filterList}}</div>
</template>
<script>
import { mapGetters }from 'vuex
export default{computed:{...mapGetters(['filterList'])}
}
</script>

Vue组件中调用Vuex:mutations中的方法

  • 直接通过 store 调用 $store.commit('模块名/xxx ', 额外参数)
  • 通过 mapMutations 映射

        1、默认根级别的映射 mapMutations([ ‘xxx’ ])
        2、子模块的映射 mapMutations(‘模块名’, [‘xxx’]) - 需要开启命名空间

方式一:普通调用方式

  • this.$store.commit('addCount') 此为不带参数的写法
  • this.$store.commit('addCount', 10) 此为带参数写法
<template><div @click="addData">{{count}}</div>
</template>
<script>
export default{methods: {addData() {this.$store.commit('increment')}}
}
</script>

方式二:辅助函数- mapMutations

mapMutations是将所有mutations里面的方法映射为实例methods里面的方法

<template><div @click="addData">{{count}}</div><div @click="increment">{{count}}</div>
</template>
<script>
export default{
import  { mapMutations } from 'vuex'methods: {// 有别名的写法[对应第一行div]...mapMutations({addData:'increment'})// 同名的简写[对应第二行div]...mapMutations(['increment'])}
}
</script>

Vue组件获取Vuex:actions中的方法

  • 直接通过 store 调用 $store.dispatch('模块名/xxx ', 额外参数)
  • 通过 mapActions 映射

        1、默认根级别的映射 mapActions([ ‘xxx’ ])
        2、子模块的映射 mapActions(‘模块名’, [‘xxx’]) - 需要开启命名空间

方式一:普通调用方式

this.$store.dispatch('increment')

this.$store.dispatch('increment',{num: 10})

<template><div @click="addData">{{count}}</div>
</template>
<script>
export default{methods: {addData() {this.$store.dispatch('increment')}}
}
</script>

方式二:辅助函数 -mapActions

mapActions 是把位于 actions中的方法提取了出来,映射到组件methods中

<template><div @click="increment">{{count}}</div>
</template>
<script>
export default{
import  { mapActions } from 'vuex'methods: {...mapActions (['increment'])}
}
</script>

 

相关文章:

vuex的原理和使用方法

简介 Vuex 是 Vue.js 应用的状态管理模式&#xff0c;它为应用内的所有组件提供集中式的状态&#xff08;数据&#xff09;管理。可以帮我们管理 Vue 通用的数据 (多组件共享的数据)。 Vuex的构成 state&#xff1a;state 是 Vuex 的数据中心&#xff0c;也就是说state是用来…...

(javaweb)SpringBootWeb案例(毕业设计)案例--文件上传

1.简介 前端程序和服务端程序 对于前端 html文件放在static目录下 location---文件提交的位置 右键--copy value -------------c盘目录下 2.本地上传--文件存储 1. 2. 使用uuid&#xff1a;保证文件名是唯一的 此时 并没有文件的拓展名--所以需要---写后缀 用字符串截取 此时图…...

数据库之存储过程和函数

目录 一、存储过程和函数概述 二、创建并调用存储过程和函数 1.创建存储过程 2.创建存储函数 3.调用存储过程和函数 三、关于存储过程和函数的表达式 1.变量 1.变量的分类 2.在存储过程和函数中应用变量 2.定义条件和处理程序 1.定义条件 2.定义处理程序 3.游标的…...

《SPSS零基础入门教程》学习笔记——02.数据管理

文章目录 2.1 连续变量的离散化2.2 自动重编码、编秩与数值计数2.3 几个常用过程2.4 多个数据文件的操作2.5 数据字典2.6 数据核查&#xff08;1&#xff09;数据验证模块&#xff08;2&#xff09;数据检验 2.7 数据准备 计算新变量&#xff08;转换 -> 计算变量&#xff0…...

嵌入式软件的一些常用调试测试方法

嵌入式软件的仿真调试测试是确保软件质量和功能正确性的关键步骤。以下是几种常见的仿真调试测试方式&#xff1a; 1.集成开发环境&#xff08;IDE&#xff09;调试&#xff1a; 使用IDE&#xff08;如IAR EWARM、Keil MDK、Eclipse等&#xff09;内置的调试器进行断点设置、单…...

Android T about screen rotation(二)

需求:客户因为模具问题,屏幕方向需要动态的变动.(方向: 0 , 90 , 180 ,270) 拆分:设备开机过程中图像显示可分为三个阶段,boot logo(1)->kernel logo(2),这一段的处理需要驱动层,所以暂时忽略. 开机动画 Bootanimation(3)阶段 和 Home Launcher应用显示(4)阶段是需要修改的…...

qt反射之类反射、方法反射、字段反射

话不多说&#xff0c;直接上代码&#xff1a; main.cpp: #include < QCoreApplication > #include “fstudent.h” #include “manage.h” int main(int argc, char *argv[]) { QCoreApplication a(argc, argv); //注册类型 qRegisterMetaType(“FStudent”); Manage m…...

服务器数据恢复—raid5阵列离线硬盘强制上线失败如何恢复数据?

服务器数据恢复环境&#xff1a; 某品牌2850服务器上有一组由6块SCSI硬盘组建的raid5磁盘阵列&#xff0c;上层操作系统为Redhat linuxext3文件系统。 服务器故障&初检&#xff1a; 服务器在运行过程中突然瘫痪&#xff0c;管理员对服务器中的raid进行检查后发现有两块硬盘…...

FastAPI+Vue3零基础开发ERP系统项目实战课 20240815上课笔记 列表和字典相关方法的学习和练习

昨日回顾 1、大小写转换2、去除空格3、判断是否为数字4、前缀后缀 昨日练习题进度 练习&#xff1a;判断验证码是否正确 1、生成一个由四个字符组成的验证码字符串&#xff0c;要求有大写有小写&#xff0c;要求左右两边有空格2、打印到控制台3、让用户输入这个验证码&…...

基于微信小程序的诗词智能学习系统的设计与实现(全网独一无二,24年最新定做)

文章目录 前言&#xff1a; 博主介绍&#xff1a; ✌我是阿龙&#xff0c;一名专注于Java技术领域的程序员&#xff0c;全网拥有10W粉丝。作为CSDN特邀作者、博客专家、新星计划导师&#xff0c;我在计算机毕业设计开发方面积累了丰富的经验。同时&#xff0c;我也是掘金、华为…...

httplib库:用C++11搭建轻量级HTTP服务器

目录 引言 一. httplib库概述 二. httplib核心组件 2.1 数据结构 2.2 类和函数 2.3 服务器搭建 ​编辑 结语 引言 在现代软件开发中&#xff0c;HTTP服务是网络应用的基础。对于需要快速搭建HTTP服务器或客户端的场景&#xff0c;使用成熟的第三方库可以极大提高开发效…...

基于嵌入式C++、SQLite、MQTT、Modbus和Web技术的工业物联网网关:从边缘计算到云端集成的全栈解决方案设计与实现

一、项目概述 1.1 项目目标与用途 随着工业4.0时代的到来&#xff0c;传统工业设备与现代信息技术的结合越来越紧密。物联网工业网关作为连接工业设备与云端平台的桥梁&#xff0c;在工业自动化、设备监控、远程运维等方面发挥着至关重要的作用。本项目旨在设计并实现一个能够…...

Chapter 38 设计模式

欢迎大家订阅【Python从入门到精通】专栏&#xff0c;一起探索Python的无限可能&#xff01; 文章目录 前言一、单例模式二、工厂模式 前言 在软件开发中&#xff0c;设计模式提供了一种可重用的解决方案&#xff0c;以应对在特定环境中反复出现的问题。这些模式是基于经验总结…...

Redis5主备安装-Redis

本次Redis有两台服务器及3个独立IP&#xff1a;主服务器的ip地址是192.168.31.190&#xff0c;从服务器的IP地址是192.168.31.191&#xff0c;vipIP地址是192.168.31.216 主备方案承载Redis最大的好处是无需考虑Redis崩后无法访问。 前提是需要优先安装keepalived&#xff0c;…...

C++票据查验、票据ocr、文字识别

现在&#xff0c;80、90后的人们逐渐过渡为职场上的主力人员&#xff0c;在工作中当然也会碰到各种各样的问题。比如&#xff0c;当你的老板给你一个艰难的任务时&#xff0c;肯定是不能直接拒绝的。那么我们该怎么做呢&#xff1f;翔云建议您先认真考虑老板说的任务的难度&…...

pytest.ini介绍

1.pytest.ini是什么 &#xff1f; pytest.ini文件是pytest的主配置文件&#xff1b;pytest.ini文件的位置一般放在项目的根目录下&#xff0c;不能随便放&#xff0c;也不能更改名字。在pytest.ini文件中都是存放的一些配置选项 &#xff0c;这些选项都可以通过pytest -h查看到…...

Vue项目打包成桌面应用

Vue项目打包成桌面应用 一、使用 NW.js 打包 NW.js基于Chromium和Node.js。它允许您直接从浏览器调用Node.js代码和模块&#xff0c;并在应用程序中使用Web技术。此外&#xff0c;您可以轻松地将web应用程序打包为本机应用程序。 NW官网...

DEFAULT_JOURNAL_IOPRIO

/* * 这些是 CFQ&#xff08;完全公平排队&#xff09;实现的 I/O 优先级组。 RT 是实时类&#xff0c;它总是能获得优质服务。 BE 是尽力而为的调度类&#xff0c;是任何进程的默认类别。 IDLE 是空闲调度类&#xff0c;只有在没有其他人使用磁盘时才会被服务。 */ /* *…...

【阿卡迈防护分析】Vueling航空Akamai破盾实战

文章目录 1. 写在前面2. 风控分析3. 破盾实战 【&#x1f3e0;作者主页】&#xff1a;吴秋霖 【&#x1f4bc;作者介绍】&#xff1a;擅长爬虫与JS加密逆向分析&#xff01;Python领域优质创作者、CSDN博客专家、阿里云博客专家、华为云享专家。一路走来长期坚守并致力于Python…...

使用AWS Lambda轻松开启Amazon Rekognition之旅

这是本系列文章的第一篇&#xff0c;旨在通过动手实践&#xff0c;帮助大家学习亚马逊云科技的生成式AI相关技能。通过这些文章&#xff0c;大家将掌握如何利用亚马逊云科技的各类服务来应用AI技术。 那么让我们开始今天的内容吧&#xff01; 介绍 什么是Amazon Rekognition&…...

多场景 OkHttpClient 管理器 - Android 网络通信解决方案

下面是一个完整的 Android 实现&#xff0c;展示如何创建和管理多个 OkHttpClient 实例&#xff0c;分别用于长连接、普通 HTTP 请求和文件下载场景。 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas…...

为什么需要建设工程项目管理?工程项目管理有哪些亮点功能?

在建筑行业&#xff0c;项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升&#xff0c;传统的管理模式已经难以满足现代工程的需求。过去&#xff0c;许多企业依赖手工记录、口头沟通和分散的信息管理&#xff0c;导致效率低下、成本失控、风险频发。例如&#…...

在四层代理中还原真实客户端ngx_stream_realip_module

一、模块原理与价值 PROXY Protocol 回溯 第三方负载均衡&#xff08;如 HAProxy、AWS NLB、阿里 SLB&#xff09;发起上游连接时&#xff0c;将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后&#xff0c;ngx_stream_realip_module 从中提取原始信息…...

视频字幕质量评估的大规模细粒度基准

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 摘要 视频字幕在文本到视频生成任务中起着至关重要的作用&#xff0c;因为它们的质量直接影响所生成视频的语义连贯性和视觉保真度。尽管大型视觉-语言模型&#xff08;VLMs&#xff09;在字幕生成方面…...

Android第十三次面试总结(四大 组件基础)

Activity生命周期和四大启动模式详解 一、Activity 生命周期 Activity 的生命周期由一系列回调方法组成&#xff0c;用于管理其创建、可见性、焦点和销毁过程。以下是核心方法及其调用时机&#xff1a; ​onCreate()​​ ​调用时机​&#xff1a;Activity 首次创建时调用。​…...

论文笔记——相干体技术在裂缝预测中的应用研究

目录 相关地震知识补充地震数据的认识地震几何属性 相干体算法定义基本原理第一代相干体技术&#xff1a;基于互相关的相干体技术&#xff08;Correlation&#xff09;第二代相干体技术&#xff1a;基于相似的相干体技术&#xff08;Semblance&#xff09;基于多道相似的相干体…...

springboot整合VUE之在线教育管理系统简介

可以学习到的技能 学会常用技术栈的使用 独立开发项目 学会前端的开发流程 学会后端的开发流程 学会数据库的设计 学会前后端接口调用方式 学会多模块之间的关联 学会数据的处理 适用人群 在校学生&#xff0c;小白用户&#xff0c;想学习知识的 有点基础&#xff0c;想要通过项…...

【SSH疑难排查】轻松解决新版OpenSSH连接旧服务器的“no matching...“系列算法协商失败问题

【SSH疑难排查】轻松解决新版OpenSSH连接旧服务器的"no matching..."系列算法协商失败问题 摘要&#xff1a; 近期&#xff0c;在使用较新版本的OpenSSH客户端连接老旧SSH服务器时&#xff0c;会遇到 "no matching key exchange method found"​, "n…...

云原生安全实战:API网关Kong的鉴权与限流详解

&#x1f525;「炎码工坊」技术弹药已装填&#xff01; 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、基础概念 1. API网关&#xff08;API Gateway&#xff09; API网关是微服务架构中的核心组件&#xff0c;负责统一管理所有API的流量入口。它像一座…...

【Nginx】使用 Nginx+Lua 实现基于 IP 的访问频率限制

使用 NginxLua 实现基于 IP 的访问频率限制 在高并发场景下&#xff0c;限制某个 IP 的访问频率是非常重要的&#xff0c;可以有效防止恶意攻击或错误配置导致的服务宕机。以下是一个详细的实现方案&#xff0c;使用 Nginx 和 Lua 脚本结合 Redis 来实现基于 IP 的访问频率限制…...