当前位置: 首页 > 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&…...

使用VSCode开发Django指南

使用VSCode开发Django指南 一、概述 Django 是一个高级 Python 框架&#xff0c;专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。 本文将创建一个简单的 Django 应用&#xff0c;其中包含三个使用通用基本模板的页面。在此…...

Unity3D中Gfx.WaitForPresent优化方案

前言 在Unity中&#xff0c;Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染&#xff08;即CPU被阻塞&#xff09;&#xff0c;这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案&#xff1a; 对惹&#xff0c;这里有一个游戏开发交流小组&…...

Docker 运行 Kafka 带 SASL 认证教程

Docker 运行 Kafka 带 SASL 认证教程 Docker 运行 Kafka 带 SASL 认证教程一、说明二、环境准备三、编写 Docker Compose 和 jaas文件docker-compose.yml代码说明&#xff1a;server_jaas.conf 四、启动服务五、验证服务六、连接kafka服务七、总结 Docker 运行 Kafka 带 SASL 认…...

Golang dig框架与GraphQL的完美结合

将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用&#xff0c;可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器&#xff0c;能够帮助开发者更好地管理复杂的依赖关系&#xff0c;而 GraphQL 则是一种用于 API 的查询语言&#xff0c;能够提…...

什么是库存周转?如何用进销存系统提高库存周转率?

你可能听说过这样一句话&#xff1a; “利润不是赚出来的&#xff0c;是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业&#xff0c;很多企业看着销售不错&#xff0c;账上却没钱、利润也不见了&#xff0c;一翻库存才发现&#xff1a; 一堆卖不动的旧货…...

Python爬虫(二):爬虫完整流程

爬虫完整流程详解&#xff08;7大核心步骤实战技巧&#xff09; 一、爬虫完整工作流程 以下是爬虫开发的完整流程&#xff0c;我将结合具体技术点和实战经验展开说明&#xff1a; 1. 目标分析与前期准备 网站技术分析&#xff1a; 使用浏览器开发者工具&#xff08;F12&…...

学校时钟系统,标准考场时钟系统,AI亮相2025高考,赛思时钟系统为教育公平筑起“精准防线”

2025年#高考 将在近日拉开帷幕&#xff0c;#AI 监考一度冲上热搜。当AI深度融入高考&#xff0c;#时间同步 不再是辅助功能&#xff0c;而是决定AI监考系统成败的“生命线”。 AI亮相2025高考&#xff0c;40种异常行为0.5秒精准识别 2025年高考即将拉开帷幕&#xff0c;江西、…...

Xen Server服务器释放磁盘空间

disk.sh #!/bin/bashcd /run/sr-mount/e54f0646-ae11-0457-b64f-eba4673b824c # 全部虚拟机物理磁盘文件存储 a$(ls -l | awk {print $NF} | cut -d. -f1) # 使用中的虚拟机物理磁盘文件 b$(xe vm-disk-list --multiple | grep uuid | awk {print $NF})printf "%s\n"…...

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

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

安宝特案例丨Vuzix AR智能眼镜集成专业软件,助力卢森堡医院药房转型,赢得辉瑞创新奖

在Vuzix M400 AR智能眼镜的助力下&#xff0c;卢森堡罗伯特舒曼医院&#xff08;the Robert Schuman Hospitals, HRS&#xff09;凭借在无菌制剂生产流程中引入增强现实技术&#xff08;AR&#xff09;创新项目&#xff0c;荣获了2024年6月7日由卢森堡医院药剂师协会&#xff0…...