Vuex存值取值与异步请求处理

news2024/11/17 14:54:08

目录

前言

一、Vuex简介

1.Vuex是什么

2.Vuex的核心概念

3.使用Vuex的好处

4.Vuex执行流程

二、Vuex的使用步骤

1.安装Vuex

2.创建store模块，分别维护state/actions/mutations/getters

3.使用Vuex存储值，获取值和改变值

1.state.js---存值

2.mutations.js---改变值

3.getters.js---取值

4.store/index.js

5.在main.js中导入并使用store实例

6.在views下创建vuex目录并创建One.vue组件

7.跨页面获取值

4.通过异步实现获取和改变值

5.通过异步实现发送Ajax到后端请求

6.同步和异步的区别

前言

在大型的Vue.js应用中，我们经常需要共享状态和进行复杂的状态管理。Vuex是一个专为Vue.js设计的状态管理库，提供了一种集中式的方式来管理应用的所有组件的状态。本文将详细介绍Vuex的使用方法，包括参数值的获取、修改，以及异步数据处理。

一、Vuex简介

1.Vuex是什么

Vuex是一个专为Vue.js应用设计的状态管理库。它提供了一种集中式的方式来管理应用的所有组件的状态，并且使得状态的变化变得可追踪、可维护。通过使用Vuex，我们可以将共享的数据以及与数据相关的逻辑统一管理，从而提高代码的可读性和可维护性。

在Vue.js应用中，组件之间的通信可以通过props和事件来实现。然而，当应用规模较大时，组件之间的状态交互变得更加复杂，而这些状态往往需要在多个组件之间共享和同步。这时，使用Vuex可以让我们更好地解决这些问题。

2.Vuex的核心概念

  1. State（状态）：存储应用的所有状态数据，类似于组件中的data选项。但是与组件的data不同的是，state存储的状态是全局共享的。

  2. Getter（获取器）：用于对state进行计算或过滤，类似于组件中的computed属性。Getter可以对state进行派生，将其转换成其他形式的值，便于组件使用。

  3. Mutation（突变）：用于修改state的值，必须是同步函数。将组件中的某个操作导致的状态变更封装成mutation，通过提交(commit) mutation来改变state的值。

  4. Action（行动）：用于处理异步操作或复杂的业务逻辑，并提交(commit) mutation来改变state的值。Action可以包含任意异步操作，例如网络请求、定时器等。组件中通过dispatch action来触发异步操作。

  5. Module（模块）：将大型应用分割成更小的模块，每个模块拥有自己的state、getter、mutation和action，以实现更好的代码组织和维护。

3.使用Vuex的好处

  1. 集中式管理：通过将状态集中管理，使得状态的变化更加可追踪和可维护。

  2. 组件通信：Vuex提供了一种在组件间共享状态的机制，简化了组件之间的通信过程。

  3. 开发效率：通过统一管理状态和逻辑，减少了重复的代码，提高了开发效率。

  4. 调试工具支持：Vue开发者工具提供了对Vuex的调试支持，方便我们查看和追踪状态的变化。

  5. 优化性能：通过使用Getter对state进行缓存，避免了重复计算成本，提高性能。

  6. 可扩展性和可维护性：在大型应用中，模块化开发是必要的，使用Vuex可以有序地维护模块之间的关系，使得代码更易于维护和扩展。Vuex的状态管理机制也可以避免因为不同模块数据交互不当导致应用整体性能问题。

4.Vuex执行流程

  1. 创建Vuex Store：首先，在Vue.js应用中创建一个Vuex store实例。这个实例将会承载应用的所有状态和相关的逻辑。我们可以在主入口文件（通常是main.js）中创建store实例，并将其注入到根Vue实例中。

  2. 定义状态(State)：在Vuex的store中定义state，即应用的所有状态数据。这些数据是共享的，可以被多个组件访问和修改。

  3. 使用Getter获取状态：Getter用于对state进行计算或过滤操作，类似于组件中的computed属性。Getter可以对state进行派生，将其转换成其他形式的值，方便组件使用。

  4. 提交Mutation修改状态：Mutation用于修改state的值，必须是同步函数。在store中定义mutation，然后通过commit方法提交(mutate)一个mutation来改变state的值。Mutation是Vuex中唯一修改state的方式，这样做可以保证状态变更的追踪性。

  5. 分发Action处理异步操作：Action用于处理异步操作、复杂业务逻辑或批量的mutation。在store中定义action，然后通过dispatch方法触发一个action的执行。Action可以包含任意异步操作，例如网络请求、定时器等。在action中可以根据需要触发一个或多个mutation来改变state的值。

  6. 组件中使用状态：在Vue组件中，可以通过computed属性或者在template中使用{{}}表达式来获取state或者Getter的值。当需要修改state时，通过commit一个mutation或dispatch一个action来触发状态的变化。

  7. 模块化管理：对于大型应用，可以将store分割成多个模块，每个模块拥有自己的state、getter、mutation和action。这样可以更好地组织和维护代码。

二、Vuex的使用步骤

1.安装Vuex

 npm i -S vuex@3.6.2

在package.json中可以看到Vuex

2.创建store模块，分别维护state/actions/mutations/getters

 注：在store/index.js文件中新建vuex的store实例，并注册引入各大模块

3.使用Vuex存储值，获取值和改变值

1.state.js---存值

export default{
  name:'美猴王'
}

2.mutations.js---改变值

export default{
  setName:(state,payload)=>{
    //state指的是state.js文件中导出的对象
    //payload是vue文件传递过来的参数
    state.name=payload.name
  }
}

3.getters.js---取值

export default{
  getName:(state)=>{
    //state指的是state.js文件中导出的对象
    return state.name;
  }
}

4.store/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

5.在main.js中导入并使用store实例

6.在views下创建vuex目录并创建One.vue组件

<template>
  <div>
    <h1>我是number one</h1>

     猴名：<input v-model="msg"/>
        <button @click="fun1">获取vuex的值</button>
        <button @click="fun2">改变vuex的值</button>

  </div>
</template>

<script>
  export default{
    data(){
      return{
        msg:'吉吉'
      }
    },
    methods: {
          fun1(){
           let name= this.$store.state.name;
           alert(name)
          },
          fun2(){
            this.$store.commit('setName',{
              name:this.msg
            })
          }
        }
  }
</script>

<style>
</style>

效果演示

7.跨页面获取值

<template>
  <div>
    <h1>我是number Two</h1>
    {{name}}
  </div>
</template>

<script>
  export default {
    computed:{
      name(){
        // return this.$store.state.name;
        return this.$store.getters.getName;
      }
    }
  }
</script>

<style>
</style>

注：return this.$store.state.name;打破了封装性

       return this.$store.getters.getName;用该方法也同样可以获取值

效果演示

4.通过异步实现获取和改变值

action.js:异步改变值

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

One.vue组件

<template>
  <div>
    <h1>我是number one</h1>

    猴名：<input v-model="msg" />
    <button @click="fun1">获取vuex的值</button>
    <button @click="fun2">改变vuex的值</button>
    <button @click="fun3">异步改变vuex的值</button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        msg: '吉吉'
      }
    },
    methods: {
      fun1() {
        let name = this.$store.state.name;
        alert(name)
      },
      fun2() {
        this.$store.commit('setName', {
          name: this.msg
        })
      },
      fun3() {
        this.$store.dispatch('setNameSynac', {
          name: this.msg
        })
      }
    }
  }
</script>

<style>
</style>

效果演示

5.通过异步实现发送Ajax到后端请求

后端代码

package com.ctb.ssm.controller;

import com.ctb.ssm.util.JsonResponseBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.http.HttpServletRequest;
import java.text.SimpleDateFormat;
import java.util.Date;

@RestController
@RequestMapping("/vuex")
public class VuexController {

    @RequestMapping("/queryVuex")
    public JsonResponseBody<?> queryVuex(HttpServletRequest request) {
        String resturantName = request.getParameter("resturantName");
        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
        String date = sdf.format(new Date());
        try {
            System.out.println("模拟异步情况，睡眠5秒，不能超过10秒，axios超时时间设置的是10秒！");
            Thread.sleep(5000);
            System.out.println("睡醒了，继续...");
        } catch (Exception e) {
            e.printStackTrace();
        }
        return new JsonResponseBody<>(resturantName + "-" + date,true,0,null);
    }
}

src/api/action.js配置后端请求

 'VUEX': '/vuex/queryVuex', //Vuex后端异步获取

src/store/action.js异步发送Ajax请求到后端

setNameAjax: (context, payload) => {
    let _this=payload._this
    let url = _this.axios.urls.VUEX
    let params = {
      resturantName: payload.name
    }
    _this.axios.post(url, params).then(r => {
    console.log(r)

    }).catch(r => {

    });
    }

One.vue组件

<template>
  <div>
    <h1>我是number one</h1>

    猴名：<input v-model="msg" />
    <button @click="fun1">获取vuex的值</button>
    <button @click="fun2">改变vuex的值</button>
    <button @click="fun3">异步改变vuex的值</button>
    <button @click="fun4">异步发送Ajax请求到后端</button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        msg: '吉吉'
      }
    },
    methods: {
      fun1() {
        let name = this.$store.state.name;
        alert(name)
      },
      fun2() {
        this.$store.commit('setName', {
          name: this.msg
        })
      },
      fun3() {
        this.$store.dispatch('setNameSynac', {
          name: this.msg
        })
      },
      fun4() {
        this.$store.dispatch('setNameAjax', {
          name: this.msg,
          _this: this
        })
      }

    }
  }
</script>

<style>
</style>

效果演示

注：

        1.在store/action.js中this并不代表vue实例，所以我们需在vue组件中将this传递过去

        2.异步相应时间超时内容不会显示，我们可以尽量避免时间过长或者可以修改响应后端超时的时间。

6.同步和异步的区别

  1. 同步操作是按顺序执行的，一般用于执行时间较短的操作。而异步操作则是交由系统底层处理，程序继续往下执行。一般用于执行时间较长或需要等待的操作。

  2. 同步操作会阻塞主线程的执行，而异步操作不会阻塞主线程的执行。

  3. 异步操作不需要等待操作完成才能开始下一步操作，而同步操作需要等待操作完成后才能进行下一步操作。

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【AI】深度学习——前馈神经网络——卷积神经网络

【AI】深度学习——前馈神经网络——卷积神经网络

文章目录 1.2 卷积神经网络1.2.1 卷积一维卷积近似微分低通滤波器/高通滤波器卷积变种 二维卷积卷积的核心就是翻转相乘卷积应用于图像处理 互相关互相关代替卷积 卷积与互相关的交换性 1.2.2 卷积神经网络卷积代替全连接卷积层特征映射卷积层结构参数数量 汇聚层(池化层)汇聚层…
阅读更多...
C语言，洛谷题，压缩技术2.0

C语言，洛谷题，压缩技术2.0

题目如下&#xff1a; 这题用C语言实现有一些难度&#xff0c;要用到一个库函数&#xff0c;strcat&#xff08;头文件是string.h&#xff09;&#xff0c;用于连接两个字符串数组&#xff0c;strcat(str,arr)就是将arr字符数组后面的\0清除&#xff0c;再将arr字符拼接到str上…
阅读更多...
python之K线模式识别

python之K线模式识别

1、晨星 晨星也称作早晨之星&#xff0c;它是一种三日形态的K线组合&#xff0c;第一日是阴线&#xff0c;第二日价格振幅较小&#xff0c;第三日出现阳线&#xff0c;它的一般形态如下图所示。晨星的K线组合形态一般出现在下跌的趋势之后&#xff0c;预示着价格的上升回调。其…
阅读更多...
网络-HTTPS

网络-HTTPS

文章目录 前言一、HTTPS简介优点SSL/TSL工作流程 加密1、对称加密2、非对称加密 二、使用HTTPS1.openSSL生成私钥&#xff08;1&#xff09;node服务端&#xff08;2&#xff09;nginx配置https服务&#xff08;前端&#xff09; nginx服务 总结 前言 Http 存在不安全、无状态…
阅读更多...
校园贴吧微信小程序搭建教程

校园贴吧微信小程序搭建教程

大家好啊&#xff0c;罗峰今天来分享一下如何搭建一个校园贴吧微信小程序。一起来看看吧。 开发流程如下&#xff1a; 1.小程序注册&#xff1a;使用微信开放平台账号登录&#xff0c;创建一个新的小程序&#xff0c;并记录下小程序的 AppID。 2.项目初始化&#xff1a;使用微…
阅读更多...
上海亚商投顾：沪指冲高回落 华为概念股持续活跃

上海亚商投顾：沪指冲高回落 华为概念股持续活跃

上海亚商投顾前言&#xff1a;无惧大盘涨跌&#xff0c;解密龙虎榜资金&#xff0c;跟踪一线游资和机构资金动向&#xff0c;识别短期热点和强势个股。 一.市场情绪 沪指昨日高开低走&#xff0c;创业板指冲高回落。华为产业链继续活跃&#xff0c;鸿蒙方向领涨&#xff0c;润…
阅读更多...
Idea创建springboot工程的时候，发现pom文件没有带＜parent＞标签

Idea创建springboot工程的时候，发现pom文件没有带＜parent＞标签

今天创建springboot工程&#xff0c;加载maven的时候报错&#xff1a; 这个问题以前遇到过&#xff0c;这是因为 mysql-connector-j 没有带版本号的原因&#xff0c;但是springboot的依赖的版本号不是都统一交给spring-boot-starter-parent管理了吗&#xff0c;为什么还会报错&…
阅读更多...
CSS-注册页面

CSS-注册页面

<!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>注册页面</title><style>*{margin:0px;padding: 0px;box-sizing: border-box;}body{background: url("../image/img/register_bg.png…
阅读更多...
OpenCV实现图像傅里叶变换

OpenCV实现图像傅里叶变换

傅里叶变换 dftcv.dft(img_float32,flagscv.DFT_COMPLEX_OUTPUT): flags:标志位&#xff0c;指定变换类型&#xff0c;cv.DFT_COMPLEX_OUTPUT会返回复数结果。 傅立叶变换&#xff0c;将输入的图像从空间域转换到频率域。 返回结果: 此函数返回一个复杂数值数组&#xff0c…
阅读更多...
多尺度retinex图像去雾算法matlab仿真

多尺度retinex图像去雾算法matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 matlab2022a 3.部分核心程序 clc; clear; close all; warning off; addpath(genpath(pwd)); rng(default)img_in im2doub…
阅读更多...
Android 10.0 framework层实现app默认全屏显示

Android 10.0 framework层实现app默认全屏显示

1.前言 在10.0的系统开发中，在对于第三方app全屏显示的功能需求开发中，需要默认app全屏显示，针对这一个要求，就需要在系统启动app 的过程中，在绘制app阶段就设置全屏属性，接下来就实现这个功能 效果图如下: 2.framework层实现app默认全屏显示的核心类 frameworks\base\…
阅读更多...
Webapck 解决：[webpack-cli] Error: Cannot find module ‘vue-loader/lib/plugin‘ 的问题

Webapck 解决：[webpack-cli] Error: Cannot find module ‘vue-loader/lib/plugin‘ 的问题

1、问题描述&#xff1a; 其一、报错为&#xff1a; [webpack-cli] Error: Cannot find module vue-loader/lib/plugin 中文为&#xff1a; [webpack-cli] 错误&#xff1a;找不到模块“vue-loader/lib/plugin” 其二、问题描述为&#xff1a; 在项目打包的时候 npm run …
阅读更多...
gitbook使用

gitbook使用

文章目录 前言一、安裝Node.js&#xff1a;二、安裝GitBook&#xff1a;編輯和創建內容&#xff1a;安装typora 前言 ubuntu20.04系统 一、安裝Node.js&#xff1a; 打開終端機&#xff08;Terminal&#xff09;。 使用以下命令來安裝Node.js和npm&#xff08;Node.js的包管…
阅读更多...
大数据笔记-大数据处理流程

大数据笔记-大数据处理流程

大家对大数据处理流程大体上认识差不多&#xff0c;具体做起来可能细节各不相同&#xff0c;一幅简单的大数据处理流程图如下&#xff1a; 1&#xff09;数据采集&#xff1a;数据采集是大数据处理的第一步。 数据采集面对的数据来源是多种多样的&#xff0c;包括各种传感器、社…
阅读更多...
UGUI交互组件Slider

UGUI交互组件Slider

一.Slider对象的结构 对象介绍Slider附加Slider组件Background背景Fill Area填充范围Fill填充对象Handle Slider Area滑块移动范围Handle滑块 二.Slider组件属性 属性说明Fill Rect关联填充对象Handle Rect关联滑块对象Direction设置方向Min Value最大取值Max Value最小取值Wh…
阅读更多...
Python高效实现网站数据挖掘

Python高效实现网站数据挖掘

在当今互联网时代&#xff0c;SEO对于网站的成功至关重要。而Python爬虫作为一种强大的工具&#xff0c;为网站SEO带来了革命性的改变。通过利用Python爬虫&#xff0c;我们可以高效地实现网站数据挖掘和关键词分析&#xff0c;从而优化网站的SEO策略。本文将为您详细介绍如何利…
阅读更多...
用例图 UML从入门到放弃系列之三

用例图 UML从入门到放弃系列之三

1.说明 关于用例图&#xff0c;这篇文章我将直接照搬罗伯特.C.马丁老爷子在《敏捷开发》一书种的第17章&#xff0c;并配上自己的理解&#xff0c;因为这一章写的实在是太精彩了&#xff0c;希望能够分享给大家&#xff0c;共勉。以下是老爷子的原文中文翻译以及豆芽的个人解读…
阅读更多...
迁移学习--预训练微调

迁移学习--预训练微调

目录 1、迁移学习作用 2、迁移学习的途径 3、相关的领域 4、在计算机视觉中的应用 5、迁移学习的办法 预训练模型 微调 6、总结 1、迁移学习作用 定义&#xff1a;能在一个任务学习一个模型&#xff0c;然后用来解决相关的别的任务&#xff0c;这样我们在一个地方花…
阅读更多...
鸿运主动安全云平台任意文件下载漏洞

鸿运主动安全云平台任意文件下载漏洞

一、漏洞描述 深圳市强鸿电子有限公司鸿运主动安全云平台存在任意文件下载漏洞&#xff0c;攻击者可通过此漏洞下载敏感文件信息&#xff0c;获取数据库账号密码&#xff0c;从而为下一步攻击做准备。 二、网络空间搜索引擎查询 fofa查询 body"./open/webApi.html"…
阅读更多...
排序算法-插入排序法（InsertSort）

排序算法-插入排序法（InsertSort）

排序算法-插入排序法&#xff08;InsertSort&#xff09; 1、说明 插入排序法是将数组中的元素逐一与已排序好的数据进行比较&#xff0c;先将前两个元素排序好&#xff0c;再将第三个元素插入适当的位置&#xff0c;也就是说这三个元素仍然是已排序好的&#xff0c;接着将第…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023