关于Vuex的基础使用存值及异步

目录

一.概述

二.取值

2.1.安装

 2.2.菜单栏

2.3.模块

2.4.引用

三.改值

四.异步&后台请求

         好啦今天就到这里了希望能帮到你哦!!!


一.概述

Vuex 是一个用于 Vue.js 应用程序的状态管理库。它主要用于集中管理应用程序中的共享状态,使得状态的变化可追踪、可调试,并且在不同组件之间共享状态变得更加简单。

在 Vue.js 中,每个组件都有自己的状态,当应用程序的规模逐渐扩大时,状态管理变得困难。Vuex 的出现就是为了解决这个问题。它采用了集中式存储管理应用的所有组件的状态,并提供了一套规则保证状态的一致性。

Vuex 的核心概念包括 state(状态)mutations(突变)actions(动作)和getters(获取器)。state 是存储应用程序状态的地方,mutations 是用于修改状态的方法,actions 是用于处理异步操作的方法,getters 是对状态进行包装的方法。

通过使用 Vuex,我们可以方便地在应用程序的任何地方访问和修改状态,而不必将状态逐层传递给需要的组件。这样可以提高代码的可维护性和可重用性,并且使得应用程序的状态管理更加清晰和可预测。

二.取值

思维图

.

2.1.安装

使用CMD命令窗口,并跳转到指定工作目录下创建项目

输入以下命令来安装Vuex:

  npm install vuex -S   (node的环境配置为10的执行这个命令)

 npm i -S vuex@3.6.2  (node的环境配置为18的执行这个命令)

如图 : 

在项目中的 package.json 文件中看到如图,说明安装成功

 2.2.菜单栏

在src中创建一个vuex的目录,在改目录下创建两个组件page1,page2

page1:

<template><div style="padding: 50px;padding-top: 20px;"><h1>page1</h1><p>state中eduName的值为: </p>{{mag}} </div>
</template><script>export default {data() {return {mag: '自然躺平'}}
}
</script><style>
</style>

 page2:

<template><div style="padding: 50px;padding-top: 20px;"><h1>page2</h1>{{mag}}</div>
</template><script>export default {data() {return {mag: '自然躺平'}}}
</script><style>
</style>

 到项目中src的router的index.js文件中配置路径

import page1 from '@/views/vuex/page1'
import page2 from '@/views/vuex/page2'
 {path: '/vuex/page1',name: 'page1',component: page1},{path: '/vuex/page2',name: 'page2',component: page2}

 在src中的components的LeftNav.vue组件中编辑(增加)代码

    <el-submenu  index="idx" key="key"><template slot="title"><i class="el-icon-loading"></i><span>VUEX使用</span></template><el-menu-item  index="/vuex/Vuex01" key="key01"><i class="el-icon-orange"></i><span>VUEX01</span></el-menu-item><el-menu-item  index="/vuex/Vuex02" key="key02"><i class="el-icon-potato-strips"></i><span>VUEX02</span></el-menu-item></el-submenu>

2.3.模块

在项目中创建store目录分别维护state/actions/mutations/getters/store

 state.js

export default {eduName: '默认值~~'
}

 getters.js

export default {getEduName: (state) => {return state.eduName;}
}

 mutations.js

export default {// type(事件类型): 其值为setEduName// payload:官方给它还取了一个高大上的名字:载荷,其实就是一个保存要传递参数的容器setEduName: (state, payload) => {state.eduName = payload.eduName;}
}

 actions.js 暂时不写代码,但要建立

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

2.4.引用

在src中的main.js进行引用

//导入并使用store实例
import store from './store'/* eslint-disable no-new */
new Vue({el: '#app',router,store,data(){return{bus :new Vue()}},components: { App },template: '<App/>'
})

 在Vuex01.vue组件中编写代码

<template><div style="padding: 50px;padding-top: 20px;"><h1>page1</h1><p>state中eduName的值为: </p><!-- {{mag}} --><el-input v-model="mag" placeholder="请输入要修改的内容" style="width: 180px;"></el-input><el-row style="margin-top: 20px;"><el-button type="primary" plain @click="hq">获取state</el-button></el-row></div>
</template><script>export default {data() {return {mag: '自然躺平'}},methods: {hq() {let eduName = this.$store.state.eduName;alert(eduName);}}}
</script><style>
</style>

效果图:

 

三.改值

在page1.vue组件中编写代码

<template><div style="padding: 50px;padding-top: 20px;"><h1>page1</h1><p>state中eduName的值为: </p><!-- {{mag}} --><el-input v-model="mag" placeholder="请输入要修改的内容" style="width: 180px;"></el-input><el-row style="margin-top: 20px;"><el-button type="primary" plain @click="hq">获取state</el-button><el-button type="primary" plain @click="xg">修改state</el-button></el-row><!-- {{mag}} --></div>
</template><script>export default {data() {return {mag: '自然躺平'}},methods: {hq() {let eduName = this.$store.state.eduName;alert(eduName);},xg() {//type(事件类型): 这里的值为setEduName,是指mutations.js中的setEduName事件this.$store.commit('setEduName', {eduName: this.mag});//修改完成给与提示this.$message({showClose: true,message: '成功修改eduName的值为 : ' + this.mag,type: 'success'});},}}
</script><style>
</style>

效果图:

四.异步&后台请求

在page1.vue组件中编写所有代码

<template><div style="padding: 50px;padding-top: 20px;"><h1>page1</h1><p>state中eduName的值为: </p><!-- {{mag}} --><el-input v-model="mag" placeholder="请输入要修改的内容" style="width: 180px;"></el-input><el-row style="margin-top: 20px;"><el-button type="primary" plain @click="hq">获取state</el-button><el-button type="primary" plain @click="xg">修改state</el-button><el-button type="primary" plain @click="xgAsync">异步修改state</el-button><el-button type="primary" plain @click="xgAjax">后台请求</el-button></el-row><!-- {{mag}} --></div>
</template><script>export default {data() {return {mag: '自然躺平'}},methods: {hq() {let eduName = this.$store.state.eduName;alert(eduName);},xg() {//type(事件类型): 这里的值为setEduName,是指mutations.js中的setEduName事件this.$store.commit('setEduName', {eduName: this.mag});//修改完成给与提示this.$message({showClose: true,message: '成功修改eduName的值为 : ' + this.mag,type: 'success'});},xgAsync() {//type(事件类型): 这里的值为setEduNameByAsync,是指actions.js中的setEduNameByAsync事件this.$store.dispatch('setEduNameByAsync', {eduName: this.mag});//修改完成给与提示this.$message({showClose: true,message: '7秒后将为把eduName值改为 : ' + this.mag,type: 'success'});},xgAjax() {//type(事件类型): 这里的值为setEduNameByAjax,是指actions.js中的setEduNameByAjax事件this.$store.dispatch('setEduNameByAjax', {eduName: this.mag,_this:this});//修改完成给与提示this.$message({showClose: true,message: '7秒后将为把eduName值改为 : ' + this.mag,type: 'success'});}}}
</script><style>
</style>

在page2.vue组件中编写所有代码

<template><div style="padding: 50px;padding-top: 20px;"><h1>page2</h1>{{eduName}}</div>
</template><script>export default {data() {return {mag: '自然躺平'}},computed: {eduName() {return this.$store.state.eduName;}}}
</script><style>
</style>

在src的action.js中配置后台请求的地址

 'SYSTEM_VuexAjax': '/vuex/queryVuex', //Vuex的异步请求

在src的store模块中编写actions.js

 export default {setEduNameByAsync: function(context, payload) {setTimeout(() => {//这里的setEduName(事件类型)是指mutations.js中的setEduName事件context.commit('setEduName', payload);}, 7000);//7000是指7秒之后执行这个事件},setEduNameByAjax: function(context, payload) {let _this=payload._this;//定义后端都请求地址let url = _this.axios.urls.SYSTEM_VuexAjax;let params = {resturantName: payload.eduName}_this.axios.post(url, params).then(r => {console.log(r);}).catch(e => {console.log(e);});}}

异步效果图:

 后台效果图:

         好啦今天就到这里了希望能帮到你哦!!!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/101668.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

idea中maven plugin提示not found

在终端中输入&#xff1a; mvn dependency:resolve 然后 解决了部分问题 Plugin org.apache.maven.plugins:maven-jar-plugin:3.1.0 not found 改为3.3.0了 Plugin maven-source-plugin:3.3.0 not found 改为 2.4 了 版本下降了 感觉后继有坑 待观察

Linux网络和系统管理

网络管理命令 1、ifconfig 命令 作用 ifconfig 命令用于显示或设置网络设备的信息。格式 ifconfig [网卡名字] [参数]可选项 网卡名字:指定要操作的网络设备。参数: up:启动指定网卡。down:关闭指定网卡。-a:显示所有网卡接口的信息,包括未激活的网卡接口。使用示例 1…

时代风口中的Web3.0基建平台,重新定义Web3.0!

近年来&#xff0c;Web3.0概念的广泛兴起&#xff0c;给加密行业带来了崭新的叙事方式&#xff0c;同时也为加密行业提供了更加具有想象力的应用场景与商业空间&#xff0c;并让越来越多的行业从业者们意识到只有更大众化的市场共性需求才能推动加密市场的持续繁荣。当前围绕这…

IDEA设置自动导入包

IDEA设置自动导入包 首先进入设置选项 之后勾选以下两项&#xff1a; 第一项&#xff1a;IntelliJ IDEA 将在我们书写代码的时候自动帮我们优化导入的包&#xff0c;比如自动去掉一些没有用到的包。 第二项&#xff1a; IntelliJ IDEA 将在我们书写代码的时候自动帮我们导入…

.NET ABP.Zero 项目疑似内存排查历程

当前项目是 .NET 5 EentityFrameworkCore&#xff0c;疑似内存泄漏&#xff0c;之所以说是疑似是因为到目前位置还没有能准确的定位到问题。当前这个框架从 .NET Core 2.1 就开始用&#xff0c;期间有升级到 3.1、5.0、6.0&#xff0c;在排查过程中还把 5.0 分支升级到了 7.0 。…

HashMap -- 调研

HashMap 调研 前言JDK1.8之前拉链法: JDK1.8之后JDK1.7 VS JDK1.8 比较优化了一下问题: HashMap的put方法的具体流程?HashMap的扩容resize操作怎么实现的? 前言 在Java中&#xff0c;保存数据有两种比较简单的数据结构:数组和链表。 数组的特点是:寻址容易&#xff0c;插入…

【RabbitMQ 实战】11 队列的结构和惰性队列

一、 队列的结构 队列的组成&#xff1a; 队列由 rabbit_amgqueue_process 和 backing_queue两部分组成。rabbit_amqqueue_process负责协议相关的消息处理&#xff0c;即接收生产者发布的消息、向消费者交付消息、处理消息的确认 (包括生产端的 confirm 和消费端的 ack) 等。…

Spring Boot读取配置文件

Spring Boot 是一种用于快速构建基于Spring的应用程序的框架&#xff0c;它提供了很多便利的功能和约定&#xff0c;使开发者可以快速搭建、配置和部署应用程序。在Spring Boot中&#xff0c;读取配置文件是一个非常常见的任务&#xff0c;本文将介绍如何在Spring Boot应用程序…

Qt/C++原创推流工具/支持多种流媒体服务/ZLMediaKit/srs/mediamtx等

一、前言 1.1 功能特点 支持各种本地视频文件和网络视频文件。支持各种网络视频流&#xff0c;网络摄像头&#xff0c;协议包括rtsp、rtmp、http。支持将本地摄像头设备推流&#xff0c;可指定分辨率和帧率等。支持将本地桌面推流&#xff0c;可指定屏幕区域和帧率等。自动启…

CAN通信-应用

up起来 驱动加载完成&#xff0c;使用ifconfig -a 可以看到两个节点 can0: flags128<NOARP> mtu 16unspec 00-00-00-00-00-00-00-00-00-00-00-00-00-00-00-00 txqueuelen 10 (UNSPEC)RX packets 0 bytes 0 (0.0 B)RX errors 0 dropped 0 overruns 0 frame 0TX p…

【Vuex+ElementUI】Vuex中取值存值以及异步加载的使用

一、导言 1、引言 Vuex是一个用于Vue.js应用程序的状态管理模式和库。它建立在Vue.js的响应式系统之上&#xff0c;提供了一种集中管理应用程序状态的方式。使用Vuex&#xff0c;您可以将应用程序的状态存储在一个单一的位置&#xff08;即“存储”&#xff09;中&#xff0c;…

MATLAB算法实战应用案例精讲-【图像处理】SLAM技术详解(应用篇)

目录 前言 知识储备 概率论基础 边缘概率 联合概率和独立 独立与条件独立

iPhone15手机拓展坞方案,支持手机快充+传输数据功能

手机拓展坞的组合有何意义&#xff1f;首先是数据存储场景&#xff0c;借助拓展坞扩展出的接口&#xff0c;可以连接U盘、移动硬盘等采用USB接口的设备&#xff0c;实现大文件的快速存储或者流转&#xff1b;其次是图片、视频的读取场景&#xff0c;想要读取相机、无人机SD/TF存…

options.html 页面设计成聊天框,左侧是功能列表,右侧是根据左侧的功能切换成不同的内容。--chatGpt

gpt: 要将 options.html 页面设计成一个聊天框式的界面&#xff0c;其中左侧是功能列表&#xff0c;右侧根据左侧的功能切换成不同的内容&#xff0c;你可以按照以下步骤进行设计和实现&#xff1a; 1. 首先&#xff0c;创建 options.html 文件&#xff0c;并在其中定义基本的…

【Xcode-宏定义配置】

1&#xff0c;项目中配置宏-DEBUG 打开Xcode项目工程 -> Targets -> Build Settings -> Preprocessor Macros -> &#xff0c;在Debug状态下点击右侧&#xff0c;“”添加&#xff0c;在对话框中输入DEBUG1&#xff0c;并保存&#xff0c;注意别把Release给覆盖了…

shell脚本学习

shell是一个用 C 语言编写的程序&#xff0c;是用户使用 Linux 的桥梁。Shell 既是一种命令语言&#xff0c;又是一种程序设计语言。实际上Shell是一个命令解释器&#xff0c;它解释由用户输入的命令并且把它们送到内核。不仅如此&#xff0c;Shell有自己的编程语言用于对命令的…

【angular】实现简单的angular国际化(i18n)

文章目录 目标过程运行参考 目标 实现简单的angular国际化。本博客实现中文版和法语版。 将Hello i18n!变为中文版&#xff1a;你好 i18n!或法语版:Bonjour l’i18n !。 过程 创建一个项目&#xff1a; ng new i18nDemo在集成终端中打开。 添加本地化包&#xff1a; ng a…

042:mapboxGL点击某feature点,使其为中心点

第042个 点击查看专栏目录 本示例的目的是介绍演示如何在vue+mapbox中通过鼠标点击某feature点,让其成为中心点。这里用到了click事件和flyTo的方法。 直接复制下面的 vue+mapbox源代码,操作2分钟即可运行实现效果 文章目录 示例效果配置方式示例源代码(共113行)相关API参…

spring boot+ vue位置信息大数据综合管理平台源码

spring boot vue位置信息大数据综合管理平台源码 UWB技术的人员定位系统源码 智慧工厂是产业升级的外在表现形式&#xff0c;利用物联网技术加强信息管理的新模式&#xff0c;人员定位管理通过物联网技术、位置信息大数据的综合处理应用&#xff0c;在智慧工厂人员管理方面具有…

大模型之Prompt研究和技巧

大模型之Prompt研究和技巧 大模型之Prompt编写简介组成技术Zero-ShotFew-shotCOTCOT-SCTOTGoTReAct 大模型之Prompt编写 简介 Prompt是是给 AI **模型的指令&#xff0c;**一个简短的文本输入&#xff0c;用于引导AI模型生成特定的回答或执行特定任务。 Prompt是你与语言模型沟…