vuex的搭建和它内部三个组成部分的使用

已于 2022-03-14 02:36:19 修改
阅读量367 收藏
点赞数
文章标签： vue.js
于 2022-03-13 06:10:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhuyuan123456/article/details/123453848
版权
本文详细介绍了Vue.js的状态管理库Vuex的使用，包括state的存储和计算属性的利用，mutations的同步数据修改，actions的异步操作以及getters的获取数据。通过辅助函数mapState、mapMutations、mapActions和mapGetters简化了对Vuex的调用，帮助开发者更好地理解和应用Vuex进行复杂应用的状态管理。
摘要由CSDN通过智能技术生成

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBASlNPTlDvvIQ=,size_20,color_FFFFFF,t_70,g_se,x_16

 看一下实际代码

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBASlNPTlDvvIQ=,size_20,color_FFFFFF,t_70,g_se,x_16

state的使用(存数据)

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBASlNPTlDvvIQ=,size_20,color_FFFFFF,t_70,g_se,x_16

我们可以通过计算属性来使用 state里面的值。因为毕竟计算属性有缓存呢

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBASlNPTlDvvIQ=,size_20,color_FFFFFF,t_70,g_se,x_16

我们也可以通过辅助函数mapstate拿到state中的数据

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBASlNPTlDvvIQ=,size_20,color_FFFFFF,t_70,g_se,x_16

再来看下mutations的使用(改数据，只能同步)

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBASlNPTlDvvIQ=,size_20,color_FFFFFF,t_70,g_se,x_16

再来看一下辅助函数实现mutations

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBASlNPTlDvvIQ=,size_20,color_FFFFFF,t_70,g_se,x_16

 

再来看actions(异步操作)

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBASlNPTlDvvIQ=,size_20,color_FFFFFF,t_70,g_se,x_16

再看一下辅助函数的使用

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBASlNPTlDvvIQ=,size_20,color_FFFFFF,t_70,g_se,x_16

getters的使用

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBASlNPTlDvvIQ=,size_20,color_FFFFFF,t_70,g_se,x_16

看一下具体的代码

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBASlNPTlDvvIQ=,size_20,color_FFFFFF,t_70,g_se,x_16

再来看下辅助形式

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBASlNPTlDvvIQ=,size_20,color_FFFFFF,t_70,g_se,x_16

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

JSONP＄
关注
Vue（三）：vuex是什么
dichengyan0013的博客
12-12 137
vuex官网介绍 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。 vuex通俗理解 vuex就像一个无形的仓库...
Vuex的用法及组成部分
JSN___的博客
07-17 1289
Vuex的用法及组成部分 1.Vuex是什么？ 借鉴 了Flux、Redux、 The Elm Architecture Vuex是专为vue.js设计的状态管理模式。 集中式存储和管理应用程序中所有组件的状态 Vuex 也集成到 Vue 的官方调试工具 一个 Vuex 应用的核心是 store（仓库，一个容器），store包含着你的应用中大部分的状态 (state) 2.什么...
vue篇——vuex
不确定因素的博客
04-13 143
vuex是什么？ Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。 Vuex分为三部分： state，驱动应用的数据源； view，以声明方式将 state 映射到视图； actions，响应在 view 上的用户输入导致的状态变化。 vuex中，有默认的五种基本的对象： state：存储状态（变量） getters：对数据获取之前的再次编译，可以理解为state的计算属性。我们在组件中使用 $sotre.getters.fun() mutations：修改状态，并且是同步的。在组件中
Vuex简介
技术小白=-=的博客
08-03 374
Vuex+Vuex原理图。只是个人笔记杂乱版本
vue2知识点：理解vuex、安装vuex、搭建vuex环境
刘大猫
06-29 743
《vue2知识点：理解vuex、安装vuex、搭建vuex环境》
《进阶篇第8章：vuex》包括理解vuex、安装vuex、搭建vuex环境、四个map方法的使用、模块化+名命空间
刘大猫
06-27 342
《进阶篇第8章：vuex》包括理解vuex、安装vuex、搭建vuex环境、四个map方法的使用、模块化+名命空间
Vue 之 Vuex 使用 vuex 实现一个todo 列表的简单实例
仙魁XAN
07-14 468
Vue开发的一些知识整理，方便后期遇到类似的问题，能够及时查阅使用。本节介绍，Vue开发的实例实战，使用Vue中的vuex来实现一个简单的todo案例，熟悉一下vuex的使用，如有不足，欢迎指出，或者你有更好的方法，欢迎留言。win10npm8.5.0vue2.5.2vuex3.6.2Vuex是一个专为Vue.js应用程序开发的状态管理模式+库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。状态视图状态。...
Vuex插件的基本原理和使用
super码力的博客
05-09 508
vuex是专门在Vue中实现集中式状态（数据）管理的一个Vue插件，里面有mapState、mapGetters、mapActions、mapMutations方法
vuex介绍
susu100600的博客
07-13 483
vuex介绍： 1、Vue有著名的全家桶系列，包含了vue-router，vuex， vue-resource。再加上构建工具vue-cli，sass样式,就是一个完整的vue项目的核心构成。 概括起来就是：1.项目构建工具、2.路由、3.状态管理、4.http请求工具。 一、Vue-cli是快速构建这个单页应用的脚手架 1 全局安装 vue-cli $ npm install --global vue-cli 2 启动项目 $ npm run serve 三、vuex vuex为专门为vue.js应用程序
Vue CLI 3全方位指南：vue+vuex搭建详解
Vue CLI 3 是一个用于快速搭建 Vue.js 项目的强大工具，它是基于 Vue.js 的开发生态系统的重要组成部分，由 Vue 社区维护。本文将详细介绍如何使用 Vue CLI 3 进行 Vue 和 Vuex（状态管理模式）的全面集成，旨在帮助...
管理系统系列--基于vue+vuex+element-ui搭建的PC端后台管理系统.zip
02-26
现在我们将详细探讨这三个关键组成部分及其在后台管理系统中的作用。 **Vue.js** 是一个轻量级的JavaScript框架，以其易学易用、高性能和灵活的组件化特性而闻名。在后台管理系统中，Vue.js用于构建用户界面，通过...
vue-vuex-i18n-template.rar
08-06
Vue.js、Vuex和i18n是前端开发中的三个重要技术栈，它们共同构建了一个功能强大的Web应用程序框架。Vue.js是一个轻量级的渐进式JavaScript框架，它以其易用性和灵活性而受到广泛欢迎。Vuex是Vue.js的状态管理库，它...
使用koa2vue2搭建自己的博客系统
08-10
为了搭建博客系统，我们需要以下主要组成部分： 1. **用户认证**：Koa 2可以与JWT（JSON Web Tokens）结合，实现用户登录和身份验证。用户登录后，服务器会返回一个JWT，客户端将此令牌存储在本地，以后每次请求都...
jeecg3版本的vue，离线启动
最新发布
sharesb的博客
10-16 172
jeecg的vue2版本已经停止维护，所以只能用vue3的版本。3版本中使用的是pnpm（npm的增强版本）下载依赖。使用pnpm安装的node_modules，不能直接复制到离线主机中（因为在 pnpm安装过程中，会给依赖的配置文件写死绝对路径，并且会在c盘生成缓存）。所以要在离线主机中启动，需要1.在联网机器上下载依赖保存到某个文件夹2.在离线主机中安装node，并配置环境变量3.在离线主机中，让npm加载第一步下载的依赖4.在离线主机中，npm正常安装。
vue3 Invalid value type passed to callWithAsyncErrorHandling()
w710537643的博客
10-11 364
vue3 提示警告。页面内点击按钮无响应。和 事件方法名 重名导致。
Vue3动态组件component不生效问题解决方法
Java_fenxiang的博客
10-14 688
问题：vue3循环渲染动态组件component不生效，页面空白在vue3使用component动态组件展示组件时，组件就是不展示显示空白。在vue2中使用动态变量component展示组件都是没问题。试了很多方法 踩了很多坑，所以记录下：登录后复制 <div class="preview-list" id="c...
Element-plus el-form、el-dialog 数据回显同时用时，重置失效问题
Mr. Zhang Xiaojian's Blog
10-12 505
当第一次打开网页并点击“编辑”按钮时，虽然对话框变量变为 true 使对话框可见，但同步代码会将 formData 对象的属性设置为默认值。由于 Vue 的异步更新机制，DOM 实际上还未更新，因此表单组件内绑定了这些有值的初始数据。这样，在后续调用 resetFields 方法时，表单将会重置为这些默认值而不是空值。编辑时表单的初始值被设置成了回显的数据，而不是空字符串。时，表单会回到上次设置的初始值，即回显的数据。
《vue leaflet学习实践笔记》
yk_ddm的博客
10-16 80
目录vue leaflet学习实践笔记 vue leaflet学习实践笔记
自定义分段式进度条
qq_34465338的博客
10-10 523
在进度条的 div 中添加新的 div 来展示异常进度，颜色可以自定义；在 div 中的 background 使用渐变属性。1、需要进行分段，用来展示正常和异常状态；一样，只是需要不断的进行删除和添加。来展示整个进度条的整体进度。属性来控制异常状态的进度。2、异常状态需要提示信息。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值