“高级Vue状态管理 - Vuex的魅力与应用“
目录
- 引言
- 1. Vuex的简介
- 1.1 什么是Vuex?
- 1.2 Vuex的核心概念
- 2. Vuex的值获取与改变(综合案例)
- 3. Vuex的异步请求
- 总结
引言
在现代Web开发中,前端应用变得越来越复杂。随着应用规模的扩大和数据流的复杂性增加,有效地管理应用的状态成为了一项重要任务。Vue.js作为一种流行的JavaScript框架,提供了Vuex这个强大的状态管理库,旨在解决这个问题。本文将深入探讨Vuex的核心概念和特点,并通过实际案例展示如何使用Vuex进行数据获取、值变更和异步请求。
1. Vuex的简介
1.1 什么是Vuex?
Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态的一致性和可预测性。Vuex的设计灵感来自于Flux和Redux,但针对Vue.js的特点进行了优化和扩展。
1.2 Vuex的核心概念

在使用Vuex之前,我们需要了解其核心概念:
- State:即应用的状态,保存在一个单一的JavaScript对象中。通过this.$store.state可以访问状态。
- Mutation:用于变更状态的方法,每个mutation都有一个字符串的事件类型和一个回调函数。通过commit方法触发mutation。
- Getter:类似于组件中的计算属性,用于从state中派生出一些状态。通过this.$store.getters可以访问getter。
- Action:用于处理异步操作或批量提交mutation的方法。通过dispatch方法触发action。
2. Vuex的值获取与改变(综合案例)
首先,需要两个页面
page1
<template><div><h1>page1</h1><p>改变state的值</p>请输入:<input v-model="msg"/><button @click="fun1">获取state</button><button @click="fun2">改变state</button></div>
</template><script>export default{data(){return {msg:'mrz'}},methods:{fun1(){alert(this.$store.state.eduName)},fun2(){this.$store.commit('setEduName',{eduName:this.msg})}}}
</script><style>
</style>
page2
<template><div><h1>page2</h1>{{eduName}}</div></template><script>export default{data(){return {msg:'mrz'}},computed:{eduName(){return this.$store.getters.getEduName;}}}
</script><style>
</style>
配置路由
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Login from '@/views/Login'
import Register from '@/views/Register'
import AppMain from '@/components/AppMain'
import LeftNav from '@/components/LeftNav'
import TopNav from '@/components/TopNav'
import AddBook from '@/views/book/AddBook'
import BookList from '@/views/book/BookList'
import page1 from '@/views/vuex/page1'
import page2 from '@/views/vuex/page2'Vue.use(Router)export default new Router({routes: [{path: '/',name: 'Login',component: Login},{path: '/Register',component: Register},{path: '/AppMain',name: 'AppMain',component: AppMain,children:[{path: 'LeftNav',name: 'LeftNav',component: LeftNav},{path: 'TopNav',name: 'TopNav',component: TopNav},{path: '/book/AddBook',name: 'AddBook',component: AddBook},{path: '/book/BookList',name: 'BookList',component: BookList},{path: '/vuex/page1',name: 'page1',component: page1},{path: '/vuex/page2',name: 'page2',component: page2}]}]
})
建包store以及五个js文件

state.js
export default{eduName:'唱歌会跑调Y'
}
mutations.js
export default{setEduName:(state,payload)=>{state.eduName = payload.eduName}
}
getters.js
export default{getEduName:(state)=>{return state.eduName;}
}
index.js
import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import getters from './getters'
import actions from './actions'
import mutations from './mutations'
Vue.use(Vuex)
const store = new Vuex.Store({state,getters,actions,mutations})export default store
配置main.js(import store from ‘./store’)
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
//开发环境下才会引入mockjs
// process.env.MOCK && require('@/mock')
// 新添加1
import ElementUI from 'element-ui'
// 新添加2,避免后期打包样式不同,要放在import App from './App';之前
import 'element-ui/lib/theme-chalk/index.css'
import App from './App'
import router from './router'
import store from './store'
// 新添加3
Vue.use(ElementUI)
Vue.config.productionTip = false/* eslint-disable no-new */
import axios from '@/api/http'
import VueAxios from 'vue-axios'Vue.use(VueAxios,axios)
new Vue({el: '#app',router,store,data(){return{Bus:new Vue()}},components: { App },template: '<App/>'
})
- 这样获取和改变就OK了,看看效果

点击改变

page2的值发生改变

3. Vuex的异步请求
3.1 异步请求的必要性
在现代Web应用中,我们经常需要进行异步操作,如获取后端数据、发送网络请求等。Vuex提供了一种机制来处理这种场景,并保证状态的一致性。
3.2 使用Actions进行异步操作
在Vuex中,我们可以定义actions来进行异步操作。以下是一些使用actions的示例:
page1
<template><div><h1>page1</h1><p>改变state的值</p>请输入:<input v-model="msg" /><button @click="fun1">获取state</button><button @click="fun2">改变state</button><button @click="fun3">改变state</button><button @click="fun4">请求后台</button></div>
</template><script>export default {data() {return {msg: 'mrz'}},methods: {fun1() {alert(this.$store.state.eduName)},fun2() {this.$store.commit('setEduName', {eduName: this.msg})},fun3() {this.$store.dispatch('setEduNameAsync', {eduName: this.msg})},fun4() {this.$store.dispatch('setEduNameAjax', {eduName: this.msg,_this:this})}}}
</script><style>
</style>
actions.js
export default{setEduNameAsync:(context,payload)=>{setTimeout(function(){context.commit('setEduName',payload)},15000)},setEduNameAjax:(context,payload)=>{let _this = payload._thislet url = _this.axios.urls.Vuex_Ajax;let params = {resturantName: payload.eduName}_this.axios.post(url, params).then(r => {console.log(r)}).catch(e => {})}
}
- 同步用commit,异步用dispatch,期间主页this的局限,在actions.js调用不到全局this的实例,需要用传参代替,将参数带过去,才能发送Ajax请求.
- 另外,注意http发送请求超时时间,一般设置为10秒,超过10秒及超时,则不会相应数据,在用deBug的情况下经常会出现数据相应不到的情况,需注意!!!
// axios默认配置
axios.defaults.timeout = 10000; // 超时时间
总结
本文深入介绍了Vuex的核心概念和特点,并通过三个大目录展示了在实际应用中如何使用Vuex进行状态管理。我们学习了如何获取和改变Vuex中的值,以及如何处理异步请求。Vuex作为Vue.js生态系统中的重要组成部分,在复杂应用开发中扮演着关键的角色。希望本文对于理解和应用Vuex有所帮助。
相关文章:
“高级Vue状态管理 - Vuex的魅力与应用“
目录 引言1. Vuex的简介1.1 什么是Vuex?1.2 Vuex的核心概念 2. Vuex的值获取与改变(综合案例)3. Vuex的异步请求总结 引言 在现代Web开发中,前端应用变得越来越复杂。随着应用规模的扩大和数据流的复杂性增加,有效地管理应用的状态成为了一项…...
Vue整合
基础配置: 1.创建:cmd 中 输入 create vue vue_name 启动命令:npm run serve 2.当node_modules(依赖)丢失时通过 npm install 下载 【根据:package-lock.json下载】 3.下载路由 npm i vue-router3.5.2 -S main.js导入 // np…...
探秘PMP和六西格玛的不同:哪一个能为你的职业生涯加分?
今天,我们将带你深入了解一项相对冷门但价值不菲的证书——六西格玛黑带。 可能你曾听说过PMP,但相比之下,六西格玛黑带的资源分享似乎较少,考试内容却更为广泛深入。这里,让我为你详细解析这一考试,带你进…...
大数据学习(3)-hive分区表与分桶表
&&大数据学习&& 🔥系列专栏: 👑哲学语录: 承认自己的无知,乃是开启智慧的大门 💖如果觉得博主的文章还不错的话,请点赞👍收藏⭐️留言📝支持一下博>主哦&#x…...
JS 原生实现触底加载
创建一个容器来存储列表项。 监听滚动事件,当滚动接近底部时触发加载更多操作。 加载更多数据后,将新数据附加到容器中。 以下是一个简单的示例: <!DOCTYPE html> <html><head><style>#scroll-container {heigh…...
结构体,位段!
目录 1.什么是位段? 别急!在下面第二点我和大家介绍。 2.位段的内存怎么分配? 还有一种情况就是两种类型夹杂在一起的位段 3.位段的跨平台问题 4.位段能干嘛?(应用) 5.位段的注意事项 1.什么是位段&…...
当10年程序员是什么体验?存款几位数?
最近网上一个话题吸引了许多人的讨论,当10年程序员,是一种什么体验? 都说程序员的高收入和工作年限应该成正比,真的是这样吗?工作10年的程序员,工资应该是什么水平?不少网友纷纷“现身说法”..…...
ExoPlayer架构详解与源码分析(4)——整体架构
系列文章目录 ExoPlayer架构详解与源码分析(1)——前言 ExoPlayer架构详解与源码分析(2)——Player ExoPlayer架构详解与源码分析(3)——Timeline ExoPlayer架构详解与源码分析(4)—…...
rust文件读写
std::fs模块提供了结构体File,它表示一个文件。 一、打开文件 结构体File提供了open()函数 open()以只读模式打开文件,如果文件不存在,则会抛出一个错误。如果文件不可读,那么也会抛出一个错误。 范例 fn main() {let file s…...
腾讯云我的世界mc服务器配置选择和价格表
开Minecraft我的世界服务器配置怎么选择?10人以内玩2核4G就够用了,开我的世界服务器选择轻量应用服务器就够了,腾讯云轻量应用服务器2核2G3M带宽轻量服务器一年95元,活动:txyfwq.com/go/tencent 轻量CPU采用至强白金处…...
基于安卓android微信小程序的旅游系统
项目介绍 随着人民生活水平的提高,旅游业已经越来越大众化,而旅游业的核心是信息,不论是对旅游管理部门、对旅游企业,或是对旅游者而言,有效的获取旅游信息,都显得特别重要.自助定制游将使旅游相关信息管理工作规范化、信息化、程序化,提供旅游景点、旅游线路,旅游新闻等服务本…...
文本编辑器去除PDF水印
用文本编辑器打开pdf,搜索水印的特殊文字,全部替换。 另外一个水印字母间有空格。 替换完后保存。 重新打开pdf:...
kubernetes负载感知调度
背景 kubernetes 的原生调度器只能通过资源请求来调度 pod,这很容易造成一系列负载不均的问题, 并且很多情况下业务方都是超额申请资源,因此在原生调度器时代我们针对业务的特性以及评估等级来设置 Requests/Limit 比例来提升资源利用效率。…...
Lock使用及效率分析(C#)
针对无Lock、Lock、ReadWriterLock、ReadWriterLockSlim四种方式,测试在连续写的情况下,读取的效率(原子操作Interlocked由于使用针对int,double等修改的地方特别多,而且使用范围受限,所以本文章没有测试) …...
安卓三防平板在行业应用中有哪些优势
在工业维修和检测中,安卓三防平板的应用也十分广泛。它可以搭载各种专业软件和工具,帮助工人们进行设备故障排查和维护,降低了维修成本和停机时间。 一、产品卖点: 1. 防水性能:该手持平板采用了防水设计,…...
2015架构真题(五十)
供应链中信息流覆盖了供应商、制造商和分销商,信息流分为需求信息流和供应信息流,()属于需求信息流,()属于供应信息流。 库存记录生产计划商品入库单提货发运单 客户订单采购合同完工报告单销售…...
VScode Invoke-Expression: 无法将参数绑定到参数“Command”,因为该参数为空字符串
打开vscode时发生错误:Invoke-Expression : 无法将参数绑定到参数“Command”,因为该参数为空字符串。 解决办法:在anaconda prompt base中输入: conda upgrade -n base -c defaults --override-channels conda...
【图像融合】差异的高斯:一种简单有效的通用图像融合方法[用于融合红外和可见光图像、多焦点图像、多模态医学图像和多曝光图像](Matlab代码实现)
💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势:🌞🌞🌞博客内容尽量做到思维缜密,逻辑清晰,为了方便读者。 ⛳️座右铭&a…...
“Python+”集成技术高光谱遥感数据处理与机器学习深度应用丨高光谱数据预处理-机器学习-深度学习-图像分类-参数回归等12个专题
目录 第一章 高光谱数据处理基础 第二章 高光谱开发基础(Python) 第三章 高光谱机器学习技术(python) 第四章 典型案例操作实践 更多应用 本教程提供一套基于Python编程工具的高光谱数据处理方法和应用案例。 涵盖高光谱遥感…...
C语言_用于ADC数据的均值滤波算法
C语言_用于ADC数据的均值滤波算法 说明: 在采集ADC值的时候一般都是多次采集然后,然后取平均值,改进型做法就是去掉最大最小值剩下的再取平均值 unsigned short average(unsigned short arr[], unsigned char size) {unsigned int sum 0;for…...
网络六边形受到攻击
大家读完觉得有帮助记得关注和点赞!!! 抽象 现代智能交通系统 (ITS) 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 (…...
Linux 文件类型,目录与路径,文件与目录管理
文件类型 后面的字符表示文件类型标志 普通文件:-(纯文本文件,二进制文件,数据格式文件) 如文本文件、图片、程序文件等。 目录文件:d(directory) 用来存放其他文件或子目录。 设备…...
springboot 百货中心供应链管理系统小程序
一、前言 随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,百货中心供应链管理系统被用户普遍使用,为方…...
java_网络服务相关_gateway_nacos_feign区别联系
1. spring-cloud-starter-gateway 作用:作为微服务架构的网关,统一入口,处理所有外部请求。 核心能力: 路由转发(基于路径、服务名等)过滤器(鉴权、限流、日志、Header 处理)支持负…...
React第五十七节 Router中RouterProvider使用详解及注意事项
前言 在 React Router v6.4 中,RouterProvider 是一个核心组件,用于提供基于数据路由(data routers)的新型路由方案。 它替代了传统的 <BrowserRouter>,支持更强大的数据加载和操作功能(如 loader 和…...
MMaDA: Multimodal Large Diffusion Language Models
CODE : https://github.com/Gen-Verse/MMaDA Abstract 我们介绍了一种新型的多模态扩散基础模型MMaDA,它被设计用于在文本推理、多模态理解和文本到图像生成等不同领域实现卓越的性能。该方法的特点是三个关键创新:(i) MMaDA采用统一的扩散架构…...
论文浅尝 | 基于判别指令微调生成式大语言模型的知识图谱补全方法(ISWC2024)
笔记整理:刘治强,浙江大学硕士生,研究方向为知识图谱表示学习,大语言模型 论文链接:http://arxiv.org/abs/2407.16127 发表会议:ISWC 2024 1. 动机 传统的知识图谱补全(KGC)模型通过…...
如何在最短时间内提升打ctf(web)的水平?
刚刚刷完2遍 bugku 的 web 题,前来答题。 每个人对刷题理解是不同,有的人是看了writeup就等于刷了,有的人是收藏了writeup就等于刷了,有的人是跟着writeup做了一遍就等于刷了,还有的人是独立思考做了一遍就等于刷了。…...
AI书签管理工具开发全记录(十九):嵌入资源处理
1.前言 📝 在上一篇文章中,我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源,方便后续将资源打包到一个可执行文件中。 2.embed介绍 🎯 Go 1.16 引入了革命性的 embed 包,彻底改变了静态资源管理的…...
使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台
🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景 随着大语言模型(LLM)的广泛应用,开发者常面临多个挑战: 各大模型(OpenAI、Claude、Gemini、Ollama)接口风格不统一;缺乏一个统一平台进行模型调用与测试;本地模型 Ollama 的集成与前…...
