Vuex基础使用存取值+异步请求

一.Vuex简介

vuex是什么?

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

什么情况使用 Vuex?

Vuex 可以帮助我们管理共享状态,并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。

如果您不打算开发大型单页应用,使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单,您最好不要使用 Vuex。一个简单的 store 模式就足够您所需了。但是,如果您需要构建一个中大型单页应用,您很可能会考虑如何更好地在组件外部管理状态,Vuex 将会成为自然而然的选择。

vuex使用场景:

  • 当一个组件需要多次派发事件时。例如购物车数量加减。
  • 跨组件共享数据、跨页面共享数据。例如订单状态更新。
  • 需要持久化的数据。例如登录后用户的信息。
  • 当您需要开发中大型应用,适合复杂的多模块多页面的数据交互,考虑如何更好地在组件外部管理状态时

vuex 的五个核心概念

  • State 定义状态(变量)

  • Getter 获取状态(变量的值)

  • Mutation 修改状态(修改变量的值)

  • Action 触发 mutation 函数,从而修改状态

  • Module 当状态很多时,把状态分开来管理

二、Vuex使用

2.1 Vuex安装

注意: node.js运行环境

1、node.js版本10输入下指令进行安装

npm install vuex 

2、node.js版本18请执行下指令 

npm i -S vuex@3.6.2 

 下载执行命令:

 安装完成出现以下配置说明成功

创建store(仓库)模块

三、使用Vuex获取、修改值案例


在项目中创建store目录

state.js:

export default{eduName:'ar.小白',aname:'',bname:''
}


mutations.js:

export default {setEduName: (state, payload) => {state.eduName = payload.eduName;}
}


getters.js:

export default {getEduName: (state) => {return state.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


3.2 引用


在src中的main.js进行引用,如下:

import store from './store'/* eslint-disable no-new */
new Vue({el: '#app',router,store,data(){return{Bus:new Vue()}},components: { App },template: '<App/>'
})
3.1 创建两个菜单组件

page1:

<template><div><h1>page1</h1><p>请输入您要修改的值</p><input type="text" v-model="msg"><button @click="changed">修改参数值</button><button @click="getData">获取参数值</button></div></template><script>export default {data () {return {msg: 'page1'}},methods:{changed(){this.$store.commit('setName',{Name:this.msg})},getData(){let name = this.$store.getters.getName;alert(name);}}}</script><style></style>

page2:

<template><div><h1>page2</h1>{{change}}</div></template><script>export default {data () {return {msg: 'page2'}},computed:{change(){return this.$store.getters.getName;}}}</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}

模拟菜单数据

 <!-- 模拟数据 -->
<el-submenu key="key_999" index="index_999"><template slot="title"><span slot="title">Vuex管理</span></template><el-menu-item key="key_99901" index="/vuex/page1"><span>page1</span></el-menu-item><el-menu-item key="key_99902" index="/vuex/page2"><span>page2</span></el-menu-item></el-submenu></el-menu>

效果展示:

四.Vuex的同步异步

解释:

同步操作:
同步操作是指立即执行并修改应用程序状态的操作。在 Vuex 中,这通常通过 mutations 来实现。Mutations 是用于修改状态的函数,它们必须是同步的,这意味着它们不应该包含异步代码。当你需要在应用程序中执行一些立即生效的状态变更时,同步操作是非常有用的。

异步操作:
异步操作是指可能需要一些时间来执行的操作,例如数据获取、网络请求、或其他需要等待的任务。在 Vuex 中,这通常通过 actions 来处理。Actions 是用于分发异步任务的函数,它们可以包含异步代码,例如异步 API 调用,然后在异步操作完成后提交 mutations 来修改状态。

异步操作适用于需要等待的任务,因为它们不会阻塞应用程序的其他操作,使得应用可以继续响应用户的输入。你可以在异步操作中使用异步 JavaScript 特性,如 Promises 或 async/await,来管理异步代码。

4.1 异步改变值


1、src/store/actions.js

export default {setNameSync: (context, payload) => {//context指的是vuex的上下文setTimeout(function() {context.commit('setName', payload)}, 3500)}
};


 2、在page1.vue组件添加异步事件

<button @click="Asynchronization">异步改变参数值</button>Asynchronization() {this.$store.dispatch('setNameSync', {name: this.msg})}

效果图:


 

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

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

相关文章

阿里云域名免费配置HTTPS

阿里云域名配置HTTPS - 知乎

C++学习——new 和 delete 运算符简介

以下内容源于C语言中文网的学习与整理&#xff0c;非原创&#xff0c;如有侵权请告知删除。 在C语言中&#xff0c;动态地分配内存用 malloc() 函数&#xff0c;释放内存用 free() 函数。如下所示&#xff1a; int* p(int*)malloc(sizeof(int)*10);//分配10个int型的内存空间f…

jwttoken+redis+springsecurity

思路 jwttoken不设置过期时间 redis管理过期时间&#xff0c;并且续签 redis中key"login:"userId, valuejwtUser 再次访问时&#xff0c;解析token中userId&#xff0c;并且根据过期时间自动续签JWT 实现登录认证 Token 自动续期方案 pom文件配置 <!--Redis--&…

XLSX json转文本流 json转文件

封装一个公共 xlsx.js import { read, utils, writeFile } from xlsx // 文本流转json // 入参&#xff1a;文本流 回调 入参{} export const readJsonFromFile (file, callBackFn, opt) > {const reader new FileReader()reader.readAsArrayBuffer(file)reader.onload …

vue原生实现element上传多张图片浏览删除

vue原生实现element上传多张图片浏览删除 <div class"updata-component" style"width:100%;"><div class"demo-upload-box clearfix"><div class"demo-upload-image-box" v-if"imageUrlArr && imageUrlAr…

点云从入门到精通技术详解100篇-点云特征学习模型及其在配准中的应用(续)

目录 基于局部邻域的点云特征学习模型 3.1引言 3.2自适应邻域选择算法

算法-动态规划-编辑距离

算法-动态规划-编辑距离 1 题目概述 1.1 题目出处 https://leetcode.cn/problems/longest-increasing-subsequence/ 1.2 题目描述 2 动态规划 2.1 思路 dp[i][j] 表示 word1[0,i) 变换为 word2[0,j)的最少步数&#xff0c;那么转移表达式&#xff1a; i和j上的字符相同时…

[网鼎杯 2018]Comment git泄露 / 恢复 二次注入 .DS_Store bash_history文件查看

首先我们看到账号密码有提示了 我们bp爆破一下 我首先对数字爆破 因为全字符的话太多了 爆出来了哦 所以账号密码也出来了 zhangwei zhangwei666 没有什么用啊 扫一下吧 有git git泄露 那泄露看看 真有 <?php include "mysql.php"; session_start(); if(…

子层连接结构

目录 1、子层连接结构介绍 2、子层连接结构 3、代码实现 1、子层连接结构介绍 输入到每个子层以及规范化层的过程中&#xff0c;还使用了残差连接&#xff08;跳跃连接&#xff09;&#xff0c;因此我们把这一部分整体结构叫子层连接&#xff08;代表子层及其连接结构&#xf…

常见Http请求形式

一、请求参数的类型 我们在做boot项目时&#xff0c;常常会向接口发起请求&#xff0c;有些请求需要附带一些参数&#xff0c;比如说分页查询&#xff0c;就需要带上pageNum(当前页)和pageSize(页面大小)等参数 有两种方式可以传递这样的参数 query类型&#xff0c;参数通过…

Spring面试题

一、Spring面试题 1、Bean的生命周期 1.调用bean的构造方法创建Bean 2.通过反射调用Set方法设 bean的属性 3.如果Bean 实现了实现了BeanNameAware接口&#xff0c;Spring将调用setBeanName()&#xff0c;设置 Bean的name 4.如果Bean实现了BeanFactoryAware接口&#xff0c…

Linux命令(100)之sz

linux命令之sz 1.sz介绍 linux命令sz是用来把文件从Linux平台下载到Windows上 2.sz用法 sz [参数] file sz参数 参数说明-b使用binary的方式下载&#xff0c;不解释字符为ascii-y相同文件名&#xff0c;覆盖-E相同文件名&#xff0c;不会将其覆盖&#xff0c;而是会在所上传…

数据结构 - 二叉树

递归实现前中后序遍历 #include<stdio.h> #include<stdlib.h>#define TElemType inttypedef struct BiTNode{TElemType data;struct BiTNode *lchild,*rchild; }BiTNode,*BiTree; BiTNode root;void visit(TElemType& e){printf("%d",e); }void Pre…

iPhone 15分辨率,屏幕尺寸,PPI 详细数据对比 iPhone 15 Plus、iPhone 15 Pro、iPhone 15 Pro Max

史上最全iPhone 机型分辨率&#xff0c;屏幕尺寸&#xff0c;PPI详细数据&#xff01;已更新到iPhone 15系列&#xff01; 点击放大查看高清图 &#xff01;

MDK自动生成带校验带SVN版本号的升级文件

MDK自动生成带校验带SVN版本号的升级文件 获取SVN版本信息 确保SVN安装了命令行工具&#xff0c;默认安装时不会安装命令行工具 编写一个模板头文件 svn_version.temp.h, 版本号格式为 1_0_0_SVN版本号 #ifndef __SVN_VERSION_H #define __SVN_VERSION_H#define SVN_REVISIO…

web前端面试-- js深拷贝的一些bug,特殊对象属性(RegExp,Date,Error,Symbol,Function)处理,循环引用weekmap处理

本人是一个web前端开发工程师&#xff0c;主要是vue框架&#xff0c;整理了一些面试题&#xff0c;今后也会一直更新&#xff0c;有好题目的同学欢迎评论区分享 ;-&#xff09; web面试题专栏&#xff1a;点击此处 文章目录 深拷贝和浅拷贝的区别浅拷贝示例深拷贝示例 特殊对象…

ODrive移植keil(五)—— 开环控制和电流变换

目录 一、开环控制1.1、控制原理1.2、硬件接线1.3、代码说明1.4、程序演示1.5、程序架构的体现 二、电流变换2.1、理论说明2.2、代码说明 ODrive、VESC和SimpleFOC 教程链接汇总&#xff1a;请点击 一、开环控制 在SimpleFOC系列中有开环控制的教程&#xff0c;SimpleFOC移植S…

linux修改docker容器时间

1.查看宿主机系统时间 date -R 2.进入docker容器查看时间 docker exec -it -u root 容器id /bin/bash cat /etc/timezone &#xff08;容器内部系统时区显示Etc/UTC即会造成时间错误&#xff09; 3.创建容器时间 echo Asia/Shanghai >/etc/timezone 4.退出容器 exit 5.复…

【C进阶】内存函数

strcpy拷贝的仅仅是字符串&#xff0c;但是内存中的数据不仅仅是字符&#xff0c;所以就有了memcpy函数 1. memcpy void *memcpy &#xff08;void * destination &#xff0c;const void * source , size_t num) 函数memcpy从source的位置开始向后拷贝num个字节的数据到desti…

基于nodejs+vue驾校预约管理系统

通过科技手段提高自身的优势&#xff1b;对于驾校预约管理系统当然也不能排除在外&#xff0c;随着网络技术的不断成熟&#xff0c;带动了驾校预约管理系统&#xff0c; 随着科学技术的飞速发展&#xff0c;各行各业都在努力与现代先进技术接轨&#xff0c;驾校预约管理系统&am…