当前位置：网站首页 > 博客教程 > 正文

vuex知识 vuex详解

connygpt 2024-10-11 11:57 14 浏览

vuex知识

vuex是什么

它是一个专门为vue.js应用程序开发的状态管理模式。它采用集中管理应用的所有组件状态，并以一定规则保证状态以一种可预测的方式发生变化。

开始

每个vuex应用的核心就是store（仓库）。‘store’基本上就是一个容器，它包含这你的应用中大部分的状态（state ）

注意事项：1、不能直接改变store中的状态，改变store中的状态唯一途径就是显示提交mutations；2、有时记得在根实例中注册store选项，这样该store实例才会注入到根组件中的所有子组件中！

基础例子

实例

核心概念

state

单一状态树

用一个对象就包含了全部的应用层级状态，因此在调试时我们可以轻易获得整个当前应用状态的快照。值得一提的是，单状态树和模块化并不冲突，后面会讲到如何将状态和状态事件变更分布到各个子模块中。

在Vue组件中获得vuex状态

例子

? 实例

mapState辅助函数

作用：上述例子中，我们在computed中需要写return this.$store.state.count 这样的繁琐的语句，使用了mapState，我们直接写 state=>state.count 即可，甚至当计算属性名和state的子节点名称相同时，只要写成 'count'即可。

? 简写成 state=> state.count 形式（花括号）

? 实例

? 简写成‘count’形式（中括号）

? 实例

对象展开运算符

组件仍然保有局部状态

getters

作用：在数据展示之前对数据进行一种再编辑，也就是对数据进行过滤或加工，说白了它相当于store的计算属性；（当很多组件都需要用到某个属性时，我们不可能把所有的函数复制一遍或者抽取一个共享函数然后多处导入它，这样太麻烦了，因此vuex引入了getter。）

注意事项：getters接受的第一个参数是state，getters也可以接受其它getters作为第二个参数。

例子

实例

mutations

作用：更改store中的状态的唯一方法就是提交mutations。

说明：mutations有点类似于事件。每个mutation都有一个字符串的事件类型（type）和一个回调函数（handler）。这个回调函数就是我们实际进行状态更改的地方，并且它会接受state作为第一个参数。

注意事项：1、mutations必须是同步函数！2、其接受的第一个参数是state

例子

实例1

actions

与mutations关系：其与mutations类似，但与mutations不同的是 1、其不能不是直接修改状态，而是提交给mutations；2、其能够包含任意异步操作，但mutations不能，mutations只能是同步的

例子

实例

modules

例子

实例

补充图示说明

图示

项目结构

插件

严格模式

表单处理

测试

热重载

vuexstore

上一篇：挑战全网最幽默的Vuex系列教程:第二讲 Vuex旗下的State和Getter
下一篇：Vue3框架搭建 vue框架搭建步骤

相关推荐

3分钟让你的项目支持AI问答模块，完全开源!: hello，大家好，我是徐小夕。之前和大家分享了很多可视化，零代码和前端工程化的最佳实践，今天继续分享一下最近开源的Next-Admin的最新更新。最近对这个项目做了一些优化，并集成了大家比较关注...

干货|程序员的副业挂，12个平台分享: 1、D2adminD2Admin是一个完全开源免费的企业中后台产品前端集成方案，使用最新的前端技术栈，小于60kb的本地首屏js加载，已经做好大部分项目前期准备工作，并且带有大量示例代码，助...

Github标星超200K，这10个可视化面板你知道几个: 在Github上有很多开源免费的后台控制面板可以选择，但是哪些才是最好、最受欢迎的可视化控制面板呢？今天就和大家推荐Github上10个好看又流行的可视化面板：1.AdminLTEAdminLTE是...

开箱即用的炫酷中后台前端开源框架第二篇: #头条创作挑战赛#1、SoybeanAdmin(1)介绍：SoybeanAdmin是一个基于Vue3、Vite3、TypeScript、NaiveUI、Pinia和UnoCSS的清新优...

搭建React+AntDeign的开发环境和框架: 搭建React+AntDeign的开发环境和框架随着前端技术的不断发展，React和AntDesign已经成为越来越多Web应用程序的首选开发框架。React是一个用于构建用户界面的JavaScrip...

基于.NET 5实现的开源通用权限管理平台: ??大家好，我是为广大程序员兄弟操碎了心的小编，每天推荐一个小工具/源码，装满你的收藏夹，每天分享一个小技巧，让你轻松节省开发效率，实现不加班不熬夜不掉头发，是我的目标！??今天小编推荐一款基于.NE...

StreamPark - 大数据流计算引擎: 使用Docker完成StreamPark的部署??1.基于h2和docker-compose进行StreamPark部署wgethttps://raw.githubusercontent.com/a...

教你使用UmiJS框架开发React: 1、什么是Umi.js?umi，中文可发音为乌米，是一个可插拔的企业级react应用框架。你可以将它简单地理解为一个专注性能的类next.js前端框架，并通过约定、自动生成和解析代码等方式来辅助...

简单在线流程图工具在用例设计中的运用: 敏捷模式下，测试团队的用例逐渐简化以适应快速的发版节奏，大家很早就开始运用思维导图工具比如xmind来编写测试方法、测试点。如今不少已经不少利用开源的思维导图组件（如百度脑图...）来构建测试测试...

【开源分享】神奇的大数据实时平台框架,让Flink&Spark开发更简单: 这是一个神奇的框架，让Flink|Spark开发更简单，一站式大数据实时平台！他就是StreamX！什么是StreamX大数据技术如今发展的如火如荼，已经呈现百花齐放欣欣向荣的景象，实时处理流域...

聊聊规则引擎的调研及实现全过程: 摘要本期主要以规则引擎业务实现为例,陈述在陌生业务前如何进行业务深入、调研、技术选型、设计及实现全过程分析,如果你对规则引擎不感冒、也可以从中了解一些抽象实现过程。诉求从硬件采集到的数据提供的形式多种...

【开源推荐】Diboot 2.0.5 发布，自动化开发助理: 一、前言Diboot2.0.5版本已于近日发布，在此次发布中，我们新增了file-starter组件，完善了iam-starter组件，对core核心进行了相关优化，让devtools也支持对IAM...

微软推出Copilot Actions，使用人工智能自动执行重复性任务: IT之家11月19日消息，微软在今天举办的Ignite大会上宣布了一系列新功能，旨在进一步提升Microsoft365Copilot的智能化水平。其中最引人注目的是Copilot...

Electron 使用Selenium和WebDriver: 本节我们来学习如何在Electron下使用Selenium和WebDriver。SeleniumSelenium是ThoughtWorks提供的一个强大的基于浏览器的开源自动化测试工具...

Quick 'n Easy Web Builder 11.1.0设计和构建功能齐全的网页的工具: 一个实用而有效的应用程序，能够让您轻松构建、创建和设计个人的HTML网站。Quick'nEasyWebBuilder是一款全面且轻巧的软件，为用户提供了一种简单的方式来创建、编辑...

一周热门

最近发表

首页
收录
顶部