vuex中 this.$store.dispatch() 与 this.$store.commit()

news2024/11/15 0:14:28

一、理解

this.$store.dispatch 分发 actions-> 调用 mutations->改变 states

二、思考

1、为什么不直接分发 mutation

mutation 有必须同步执行的限制,而 Action 不受约束,可以在 action 内部执行异步操作

2、Action 通常是异步的,如何知道 action 什么时候结束?如何才能组合多个 action,处理复杂的异步流程

store.dispatch 可以处理被触发的 action 的处理函数返回 Promise,并且 store.dispatch 仍旧返回 Promise

引用官网举例:

// 假设 getData() 和 getOtherData() 返回的是 Promise
actions: {
  async actionA ({ commit }) {
    commit('gotData', await getData())
  },
  async actionB ({ dispatch, commit }) {
    await dispatch('actionA') // 等待 actionA 完成
    commit('gotOtherData', await getOtherData())
  }
}

一个 store.dispatch 在不同模块中可以触发多个 action 函数。在这种情况下,只有当所有触发函数完成后,返回的 Promise 才会执行

三、比较

1、相同点

都可以修改 state,并且也会触发视图的更新

2、 不同点

this.$store.dispatch() :含有异步操作,例如向后台提交数据,写法:this.$store.dispatch(‘action方法名’,值)
this.$store.commit():同步操作,,写法:this.$store.commit(‘mutations方法名’,值)

commit 调用的是 vuex 中 mutation 里的方法,存在同步限制;
dispatch 调用的数 vuex 中 action 里的方法,action 中可以调用 mutation 中的函数,也可执行异步操作;

commit:同步操作

// 存储
this.$store.commit('chgval',name);
// 取值
this.$store.state.chgval;

dispatch:异步操作

// 存储
this.$store.dispatch('listdata',name);
// 取值
this.$store.getters.listdata;

四、案例

Vuex文件 src/store/index.js

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export const store = new Vuex.Store({
  // state专门用来保存 共享的状态值
  state: {
    // 保存登录状态
    login: false
  },
  // mutations: 专门书写方法,用来更新 state 中的值
  mutations: {
    // 登录
    doLogin(state) {
      state.login = true;
    },
    // 退出
    doLogout(state) {
      state.login = false;
    }
  }
});

组件JS部分 : src/components/Header.vue

<script>
// 使用vux的 mapState需要引入
import { mapState } from "vuex";

export default {
  // 官方推荐: 给组件起个名字, 便于报错时的提示
  name: "Header",
  // 引入vuex 的 store 中的state值, 必须在计算属性中书写!
  computed: {
    // mapState辅助函数, 可以快速引入store中的值
    // 此处的login代表,  store文件中的 state 中的 login, 登录状态
    ...mapState(["login"])
  },
  methods: {
    logout() {
      this.$store.commit("doLogout");
    }
  }
};
</script>

组件JS部分 : src/components/Login.vue

<script>
export default {
  name: "Login",
  data() {
    return {
      uname: "",
      upwd: ""
    };
  },
  methods: {
    doLogin() {
      console.log(this.uname, this.upwd);
      let data={
        uname:this.uname,
        upwd:this.upwd
      }
       this.axios
        .post("user_login.php", data)
        .then(res => {
          console.log(res);
          let code = res.data.code;

          if (code == 1) {
            alert("恭喜您, 登录成功! 即将跳转到首页");

            // 路由跳转指定页面
            this.$router.push({ path: "/" });

            //更新 vuex 的 state的值, 必须通过 mutations 提供的方法才可以
            // 通过 commit('方法名') 就可以出发 mutations 中的指定方法
            this.$store.commit("doLogin");
          } else {
            alert("很遗憾, 登陆失败!");
          }
        })
        .catch(err => {
          console.error(err);
        });
    }

  }
};
</script>

在这里插入图片描述
在这里插入图片描述

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

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

相关文章

配置日志输出到指定位置的文件,单独报错error级别以上的日志,按日志类别打印日志

目录1.配置文件2.测试程序&#xff1a;工具&#xff1a;log4j的jar包、配置文件log4j.properties(文件名自定义)、eclipse或IDEA 更多参考&#xff1a;https://www.cnblogs.com/ITtangtang/p/3926665.html、 1.配置文件 新建一个配置文件log4j.properties&#xff08;我把它放…

区块链游戏走出一地鸡毛,元宇宙3D国风链游或成最大受益者

曾推出过《Cytus》《Deemo》《聚爆》等知名游戏的雷亚&#xff0c;其CEO游名扬在接受采访时曾谈到&#xff0c;游戏产业是文化产业加上科技产业的组合体&#xff0c;这两者是组成游戏产业的主要部分。看游戏的趋势&#xff0c;就要针对文化和科技的趋势上来看。 这话没错。 20…

flutter StreamController,ValueListenableBuilder,NotificationListener

FutureBuilder &#xff08;异步数据更新&#xff09; StreamBuilder &#xff08;异步数据更新&#xff09; 构造函数 特点 接收多个异步操作的结果class StreamBuilder<T> extends StreamBuilderBase<T, AsyncSnapshot<T>>{}单订阅&#xff1a;StreamCo…

在Linux中进行Hbase搭建

在公网IP为x.x.x.x、y.y.y.y和z.z.z.z并装有Centos8的服务器上进行hadoop集群搭建、zookeeper集群搭建和hbase搭建&#xff0c;都安装hadoop-3.1.3、server-jre-8u202-linux-x64、apache-zookeeper-3.6.4-bin和hbase-2.5.0-bin。 环境准备&#xff08;三台服务器都一样&#x…

基于javaweb宠物领养平台管理系统设计和实现

基于javaweb宠物领养平台管理系统设计和实现 博主介绍&#xff1a;5年java开发经验&#xff0c;专注Java开发、定制、远程、文档编写指导等,csdn特邀作者、专注于Java技术领域 作者主页 超级帅帅吴 Java毕设项目精品实战案例《500套》 欢迎点赞 收藏 ⭐留言 文末获取源码联系方…

C++基础——C++ 判断

C基础——C 判断C 判断判断语句C if 语句语法流程图? : 运算符C 判断 判断结构要求程序员指定一个或多个要评估或测试的条件&#xff0c;以及条件为真时要执行的语句&#xff08;必需的&#xff09;和条件为假时要执行的语句&#xff08;可选的&#xff09;。 下面是大多数编…

DAMA数据管理知识体系指南之数据管理概述

第2章 数据管理 2.1 引言 2.2 使命和目标 使命 在信息的可用性、安全性和质量方面&#xff0c;满足并超越企业中所有利益相关者的信息要求。 战略目标 &#xff08;1&#xff09;理解企业和所有利益相关者的信息需求。 &#xff08;2&#xff09;获取、存储、保护和确保数据资…

堆的结构及函数接口、堆排序,TopK

本篇内容涉及到二叉树的概念及性质&#xff0c;可参考文章 树和二叉树的概念及性质 文章目录一、堆的概念二、堆的存储结构三、堆的函数接口1. 初始化及销毁2. 打印函数3. 堆的插入4. 堆的删除5. 取堆顶、判空、数据个数四、建堆算法和时间复杂度1. 向上调整建堆2. 向下调整建堆…

CTFshow--web--红包题第二弹

查看源代码&#xff0c;按注释提示&#xff0c;构造参数试试?cmdaa<?php #error_reporting(0); ?> <html lang"zh-CN"><head><meta http-equiv"Content-Type" content"text/html; charsetUTF-8" /><meta name&quo…

MATLAB绘制爱心曲线并导出

MATLAB绘制爱心曲线并导出 爱心曲线的表达式&#xff1a; f(x)x2/3e3(π−x2)1/2sin(aπx)f(x)x^{2/3}\frac e 3(\pi-x^2)^{1/2}sin(a\pi x) f(x)x2/33e​(π−x2)1/2sin(aπx) f (x,a)x.^2.^(1/3)exp(1)/3*(pi-x.^2).^(1/2).*sin(a*pi*x); h figure(color,[1 1 1]); set(g…

应用系统与钉钉集成案例及操作步骤

1、准备钉钉应用 1.1、注册钉钉账号 作为钉钉的企业管理员&#xff0c;首先登录钉钉官网&#xff0c;注册一个钉钉账号。 如果已经有账号&#xff0c;则直接使用即可。 钉钉官网&#xff1a;https://www.dingtalk.com/ 1.2、开通企业团队 企业管理员使用账号登录钉钉。 如…

如何限制docker容器使用内存大小

本文介绍如何通过docker运行参数配置限制docker容器可以使用的内存上限。docker容器默认可以使用全部宿主机的所有内存和 swap 分区&#xff0c;比如宿主机的内存是32G&#xff0c;则运行一个docker容器最多可以分配到32G内存&#xff0c;如果启用了多个docker容器&#xff0c;…

CSS实现文本显示两行

效果图 text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;display: -moz-box;-moz-line-clamp: 2;-moz-box-orient: vertical;overflow-wrap: break-word;word-break: break-all;white-space: normal;overflow: hidden;text-…

SAP ADM100-2.2 SAP系统开启过程中的配置文件

SAP系统的每个实例需要的数据都在文件系统中,包括所有实例都需要访问的全局数据(Globally)和个别实例需要访问的数据。在文件系统汇总,实例需要的数据被包含在usr/sap目录,在这里被进一步组织到子目录。 【注意】:业务数据和相关数据被存储在数据库中,数据库根据不同的制…

【GD32F427开发板试用】三、USB转CAN功能开发与试用总结

本篇文章来自极术社区与兆易创新组织的GD32F427开发板评测活动&#xff0c;更多开发板试用活动请关注极术社区网站。作者&#xff1a;chenjie 【GD32F427开发板试用】一、环境搭建与freertos移植 【GD32F427开发板试用】二、USB库移植与双USB CDC-ACM功能开发 【GD32F427开发板…

【C++】IO流

​&#x1f320; 作者&#xff1a;阿亮joy. &#x1f386;专栏&#xff1a;《吃透西嘎嘎》 &#x1f387; 座右铭&#xff1a;每个优秀的人都有一段沉默的时光&#xff0c;那段时光是付出了很多努力却得不到结果的日子&#xff0c;我们把它叫做扎根 目录&#x1f449;C语言的输…

04 微服务调用组件Feign

JAVA 项目中如何实现接口调用&#xff1f; 1&#xff09;Httpclient HttpClient 是 Apache Jakarta Common 下的子项目&#xff0c;用来提供高效的、最新的、功能丰富的支持 Http 协议的客户端编程工具包&#xff0c;并且它支持 HTTP 协议最新版本和建议。HttpClient 相比传统…

linux下Jenkins的安装、部署、启动(完整教程)

linux下Jenkins的安装、部署、启动(完整教程) 一、安装环境 Linux系统Centos 7 二、安装步骤 1、安装jdk8 2、安装jenkins 首先依次如下三个命令&#xff1a; 2.1 导入镜像 sudo wget -O /etc/yum.repos.d/jenkins.repo https://pkg.jenkins.io/redhat-stable/jenkins.…

内网渗透之中间人欺骗攻击

ARP攻击协议简介ARP全称为Address Resolution Protocol&#xff0c;即地址解析协议&#xff0c;它是一个根据IP地址获取物理地址的TCP/IP协议&#xff0c;主机发送信息时将包含目标IP地址的ARP请求广播到网络上的所有主机&#xff0c;并接收返回消息&#xff0c;以此确定目标的…

手把手教你QT打包(Windows)

第一步、切换工程版本 在这一步可以直接在QT的项目页面就可以完成 在这里切换完成之后建议先运行一下&#xff0c;确保没有问题我们再进行下一步 第二步、找到对应的文件夹和编译工具进行编译 我们在使用的过成功&#xff0c;会发现点击工程中的运行就可以执行&#xff0c;但是…