详细分析 this.$store.dispatch 基本知识（附Demo）

于 2025-04-03 08:00:00 发布
阅读量1.1k 收藏 13
点赞数 27
分类专栏： 前端/小程序 文章标签： vuex dispatch 共享数据 异步 同步
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_47872288/article/details/146964695
版权

目录

前言

🤟 找工作，来万码优才：👉 #小程序://万码优才/r6rqmzDaXpYkJZF

爬虫神器，无代码爬取，就来：bright.cn

刚开始了解这种语法结构的时候很懵！看了网上的讲解也是一知半解！

后面才理解其奥妙之处，让我带你深入了解！！！

1. 基本知识

言归正传，先说一说基本的知识点

this.$store.dispatch 是 Vuex 中用于触发 Action 的方法

Vuex 是 Vue.js 的状态管理库，而 Action 是 Vuex 中用于执行异步操作的部分，比如：

  • 发送 AJAX 请求
  • 处理数据存储
  • 触发多个 Mutations 等

其基本语法如下：

this.$store.dispatch(actionName, payload);

  • actionName：要触发的 Action 名称（字符串）

  • payload（可选）：传递给 Action 的参数（对象、数组、字符串等）

2. Demo

场景 1：登录后获取用户信息
通常，在用户登录成功后，我们希望：
通过 API 获取用户信息，把用户信息存入 Vuex，进行页面跳转

// store/index.js
const store = new Vuex.Store({
  state: {
    userInfo: null
  },
  mutations: {
    SET_USER_INFO(state, userInfo) {
      state.userInfo = userInfo;
    }
  },
  actions: {
    async GetUserInfo({ commit }) {
      const res = await axios.get('/api/user'); // 模拟 API 请求
      commit('SET_USER_INFO', res.data);
      return res.data;
    }
  }
});

触发 GetUserInfo：

this.$store.dispatch('GetUserInfo').then(userInfo => {
  console.log('用户信息:', userInfo);
});

场景 2：加载全局配置

某些应用需要在启动时加载配置，比如主题、权限、系统设置等：

// store/actions.js
export default {
  async LoadSettings({ commit }) {
    const res = await axios.get('/api/settings');
    commit('SET_SETTINGS', res.data);
  }
};

组件中调用：

this.$store.dispatch('LoadSettings');

场景 3：异步提交数据

在表单提交时，通常需要：

  1. 发送请求

  2. 更新 Vuex 状态

  3. 反馈操作结果

// store/actions.js
export default {
  async SubmitForm({ commit }, formData) {
    const res = await axios.post('/api/form', formData);
    commit('UPDATE_FORM_STATUS', res.data.status);
    return res;
  }
};

组件中调用：

this.$store.dispatch('SubmitForm', { name: 'Tom', age: 25 }).then(res => {
  console.log('提交成功:', res);
});

3. 对比

上述Demo，你可以看到其用法细节

最主要是其全局统筹 以及 异步

那先说说同步一般我们用什么，回顾如下：

3.1 同步

  • 示例：设置用户信息
    ✅ 适用于：
    本地更新状态（无需 API 请求）
    表单数据存储、主题切换等 UI 状态管理

如果只是简单地修改 Vuex state，不涉及 API 请求，可以直接使用 commit 提交 mutations

// store/index.js
const store = new Vuex.Store({
  state: {
    userInfo: null
  },
  mutations: {
    SET_USER_INFO(state, userInfo) {
      state.userInfo = userInfo;
    }
  }
});

在组件中使用 commit

<template>
  <button @click="setUserInfo">设置用户信息</button>
</template>

<script>
export default {
  methods: {
    setUserInfo() {
      this.$store.commit('SET_USER_INFO', { name: 'Tom', age: 25 });
    }
  }
};
</script>
  • 使用 mapMutations
    简化 commit 语法，使代码更简洁
    组件较多，需要多次调用 mutations
<template>
  <button @click="setUserInfo">设置用户信息</button>
</template>

<script>
import { mapMutations } from 'vuex';

export default {
  methods: {
    ...mapMutations(['SET_USER_INFO']),
    setUserInfo() {
      this.SET_USER_INFO({ name: 'Tom', age: 25 });
    }
  }
};
</script>
  • 直接修改 state（不推荐）
    虽然 Vuex 允许直接修改 state，但 不推荐 这样做
this.$store.state.userInfo = { name: 'Tom', age: 25 }; // 直接赋值

基本的对比方案：

方式commit 提交 mutationsmapMutations直接修改 state
是否同步 ✅ 是 ✅ 是 ✅ 是
是否推荐 ✅ 推荐 ✅ 推荐 ❌ 不推荐
代码简洁度 适中 简洁 直接修改
是否支持 Vuex 规范 ✅ 是 ✅ 是 ❌ 不是
适用场景 需要手动提交 mutations 多个组件共享 mutations临时修改（但不推荐）

3.2 异步

  • 方式 1：直接调用 API（不使用 Vuex）
    如果 Vuex 仅用于存储，而不涉及多个组件共享状态，可以直接在组件中调用 API，而不是通过 Vuex actions
    适用场景：仅当前组件需要数据，不需要全局共享。
axios.get('/api/user').then(res => {
  console.log('用户信息:', res.data);
});
  • 方式 2：使用 mapActions（简化调用）
    Vuex 提供 mapActions 帮助映射 actions，减少 this.$store.dispatch 书写量
<template>
  <button @click="getUserInfo">获取用户信息</button>
</template>

<script>
import { mapActions } from 'vuex';

export default {
  methods: {
    ...mapActions(['GetUserInfo']),
    async getUserInfo() {
      const userInfo = await this.GetUserInfo();
      console.log('用户信息:', userInfo);
    }
  }
};
</script>

基本的对比方案：

对比项this.$store.dispatch直接调用 APImapActions
是否使用 Vuex✅ 是❌ 否✅ 是
是否支持异步✅ 是✅ 是✅ 是
是否适用于全局状态管理✅ 是❌ 否✅ 是
代码结构结构清晰，符合 Vuex 规范代码分散，不利于维护代码简洁，适用于组件
适用场景需要全局管理的异步操作组件私有数据需要 Vuex actions 但不想使用 dispatch

3.3 this.$store.commit

说到全局共享，想到一个这个 this.$store.commit，用于 同步更新 Vuex state

而 this.$store.dispatch 主要用于 异步操作（如 API 请求）

同样也举例几个Demo

  • 示例：同步设置用户信息
    同步执行，立即更新 state
    适用于本地数据修改，比如修改用户信息、设置主题等
// store/index.js
const store = new Vuex.Store({
  state: {
    userInfo: null
  },
  mutations: {
    SET_USER_INFO(state, userInfo) {
      state.userInfo = userInfo;
    }
  }
});

在组件中使用 commit

<template>
  <button @click="setUserInfo">设置用户信息</button>
</template>

<script>
export default {
  methods: {
    setUserInfo() {
      this.$store.commit('SET_USER_INFO', { name: 'Tom', age: 25 });
    }
  }
};
</script>
  • 示例：登录后获取用户信息
    用于异步操作，比如 API 请求后再更新 state
    可以返回 Promise，支持 .then() 处理异步结果
// store/index.js
const store = new Vuex.Store({
  state: {
    userInfo: null
  },
  mutations: {
    SET_USER_INFO(state, userInfo) {
      state.userInfo = userInfo;
    }
  },
  actions: {
    async GetUserInfo({ commit }) {
      const res = await axios.get('/api/user'); // 模拟 API 请求
      commit('SET_USER_INFO', res.data);
      return res.data;
    }
  }
});

在组件中使用 dispatch

<template>
  <button @click="fetchUserInfo">获取用户信息</button>
</template>

<script>
export default {
  methods: {
    fetchUserInfo() {
      this.$store.dispatch('GetUserInfo').then(userInfo => {
        console.log('用户信息:', userInfo);
      });
    }
  }
};
</script>

commit vs dispatch 对比

对比项this.$store.committhis.$store.dispatch
是否同步✅ 是❌ 否（通常是异步）
是否涉及API❌ 否✅ 通常涉及 API 请求
是否返回 Promise❌ 否✅ 是
适用场景直接修改 state异步获取数据后再修改 state
示例this.$store.commit(‘SET_USER_INFO’, userInfo)this.$store.dispatch(‘GetUserInfo’)

4. 实战

举例一个实战中的Demo，感受下this.$store.dispatch的实际用法

以登录获取用户为例

this.$store.dispatch('SocialLogin', payload) 相当于在 Vuex actions 里封装了 socialLogin 这个 API 请求方法
如果不使用 Vuex，就需要在组件中手动引入 API 并调用

4.1 直接调用

<script>
import { socialLogin } from '@/api/login.js';

export default {
  methods: {
    async handleSocialLogin() {
      const res = await socialLogin('github', 'code123', 'stateXYZ');
      console.log('登录成功:', res);
    }
  }
};
</script>

✅ 优点：

  • 代码简单，直接调用 API，无需额外的 Vuex 配置

  • 适用于不需要全局存储的场景，比如单次请求，不需要在多个组件中共享

❌ 缺点：

  • 无法全局管理状态，如果多个组件都需要用 socialLogin 结果，每个地方都得手动管理

  • 可能导致代码重复，每个组件都要引入 socialLogin 并调用，代码维护困难

4.2 dispatch 调用

以下是实战中抽取的Demo：

在这里插入图片描述

（1）在 Vuex actions 里封装 API 调用

// store/actions.js
import { socialLogin } from '@/api/login.js';

export default {
  async SocialLogin({ commit }, { type, code, state }) {
    const res = await socialLogin(type, code, state);
    commit('SET_USER_INFO', res.data); // 假设返回用户信息
    return res;
  }
};

（2）在组件中使用 Vuex 调用

<script>
export default {
  methods: {
    async handleSocialLogin() {
      const res = await this.$store.dispatch('SocialLogin', {
        type: 'manong',
        code: 'code123',
        state: 'stateXYZ'
      });
      console.log('登录成功:', res);
    }
  }
};
</script>

✅ 优点：

  • 支持全局状态管理：如果登录成功，可以在 Vuex state 里存储用户信息，所有组件都能访问

  • 代码更清晰：组件不需要关心 socialLogin 的实现细节，只用 dispatch 调用，减少 API 引入

  • 易于扩展：如果以后 socialLogin 需要额外处理，比如记录日志、触发事件，只需修改 Vuex actions，而不是修改每个组件的逻辑

❌ 缺点：

  • 需要额外配置 Vuex store，对于简单需求可能会显得麻烦
vuex
weixin_45701868的博客
05-28 1331
目录 1.1 功能简介 1.2 下载以及安装 1.3 state核心组件 1.4 Mutations组件 1.5 Actions组件 1.6 模块化管理 1.7 持久存储 1.8 案例 1.1 功能简介 1、当写vue项目时，当涉及到频繁的组件之间的数据通讯、一个组件需要多次派发事件时，我们的代码就会变得复杂、冗余、难以维护 2、Vuex是一个专为Vue.js应用程序开发的状态管理模式。我们可以把一些共享的数据保存至vuex中，方便各个组件修改或获取公共状态。 3
Vue2 - 基础知识点（待补充VUE3）
zhuanghuajun的博客
08-27 387
2021最新Vue技术全家桶丨vue3.x最新版详细讲解示例 vue-数据绑定 vue-el与data的两种写法 vue-MVVM 数据代理 回顾Object.defineProperty方法 何为数据代理 Vue中的数据代理 事件修饰符 键盘事件 计算属性 姓名案例_插值语法实现 姓名案例_methods实现 姓名案例_计算属性实现 监视属性 天气案例_监视属性 绑定样式 条件渲染 列表渲染 基本列表 key的原理 列...
如何使用vuex，$store中的dispatch和commit
weixin_51747462的博客
08-12 2168
如何使用vuex，$store中的dispatch和commit
Vuex基础【一】
小管管的博客
07-08 3526
​ Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用存储管理应用的所有组件的状态，并以相应的规则保证状态以一种的方式发生变化。结论 初始化： vuex基础-state state是放置所有公共状态的属性，如果你有一个公共状态数据 ， 你只需要定义在 state对象中 如何在组件中获取count? 1.原始形式- 插值表达式 组件中可以使用 this.$store 获取到vuex中的，可通过state属性属性获取count， 如下 2.计算属性- 将state属性定义在计算属性中
vuex 学习之路
小芳的专栏
11-09 1098
vuex学习之路
vuex中store存储store.commit和store.dispatch的区别及用法
freewlt
11-27 1306
代码示例： this.$store.commit('loginStatus', 1); this.$store.dispatch('isLogin', true) 规范的使用方式： // 以载荷形式 store.commit('increment'，{ amount: 10 //这是额外的参数 }) // 或者使用对象风格的提交方式 sto...
解决vue中刷新页面，store数据丢失的问题
m0_55074611的博客
02-24 1916
解决vue中刷新页面，数据丢失的问题 vuex——状态管理工具，是一个组件的数据管理仓库。我们使用 this.$store.state来获取数据，并对获取到的数据进行一系列的操作，然而，一顿操作后，页面刷新数据没了，，，没了！！！这显然是不行的，所以我想到的方法就是，存储在本地当中。 重点在这，代码↓↓↓↓↓ 在脚手架中，使用生命周期钩子函数created，created 在页面创建完成时，存取数据，代码如下 ，把这段代码直接复制粘贴。 当然 这段代码是写在与components，data，methods同
搞懂Vuex（介绍与使用）
weixin_66619918的博客
01-23 618
Vuex介绍与使用
【问题总结（23）】post功能
weixin_45650440的博客
08-10 155
思路 目标 把数据放store里 过程 参考二次录入 site.vue代码demo accountStore.js 下面展示一些 内联代码片。 // A code block var foo = 'bar'; // js const siteList = await this.$store.dispatch('site/GetList')//由此定位store/site.js await this.$store.dispatch('site/Destroy', record) const operat
vue系列教程-15vuex的使用
qq_41689712的博客
06-23 294
本内容为系列内容，全部内容请看我的vue教程分类 我的个人博客 本节仓库地址 视频教程地址 什么是vuex vuex是vue.js专门用来进行状态管理的工具，采用集中式状态管理,并以相应的规则保证一种可预测的方式发生变化 通俗的来说，就相当于一个管家，我们把一些公用的数据交给他进行管理，并且每个组件都能从他那里获取数据，或者通知他修改数据，比如存储用户信息 组成 State 数据仓库 getter 获取数据 mutation 修改数据 action 提交mutation modules 模块 .
vuexdemo.zip
12-27
例如，你可以使用 `this.$store.state.counter` 获取计数器的值，使用 `this.$store.commit('increment')` 来增加计数器，或者使用 `this.$store.dispatch('asyncIncrement')` 触发异步操作。 Vuex 提供了模块化的...
Vue高级知识概括
weixin_41005188的博客
07-20 2021
..
基于NSGA2与熵权TOPSIS的电力系统储能选址定容优化及Matpower潮流计算研究
04-03
内容概要：本文详细探讨了利用NSGA2算法进行电力系统中储能系统的选址和定容优化，并结合熵权TOPSIS方法选择最优解。首先介绍了使用Matpower工具包进行潮流计算的基础步骤，随后深入讨论了储能系统引入后的复杂性和优化目标设定。文中展示了如何构建目标函数，包括储能的投资成本和系统电压偏差，并详细解释了NSGA2算法的具体实现，如种群初始化、交叉变异操作以及约束条件处理。最后，通过熵权法确定权重并应用TOPSIS方法对多个优化结果进行评估，选出综合性能最佳的储能配置方案。 适合人群：从事电力系统规划、优化算法研究的专业人士，尤其是对储能系统优化感兴趣的科研人员和技术开发者。 使用场景及目标：适用于需要解决电力系统中储能系统选址和定容问题的实际工程项目。主要目标是在满足系统稳定性要求的前提下，最小化储能系统的投资成本，提高系统的经济性和可靠性。 其他说明：文章提供了详细的代码片段和理论推导，帮助读者更好地理解和实施所提出的优化方法。此外，还提到了一些实际应用中的注意事项，如SOC约束处理、参数选择等，为后续的研究和应用提供了宝贵的实践经验。
基于python+pyqt5实现视频自动化下载、剪辑和上传系统源码+项目说明.zip
04-03
基于python+pyqt5实现视频自动化下载、剪辑和上传系统源码+项目说明.zip 该项目是用脚本实现部分视频网站视频内容的自动化下载、剪辑以及上传，其中界面是用PyQT做的。 使用的浏览器驱动是undetected_chromedriver，可以跳过tiktok的机器人检查 使用的浏览器是91，版本：Google_Chrome_(64bit)_v91.0.4472.77 【功能】 自动从各种视频网站下载视频 支持视频剪辑和合集制作 支持自动上传视频到视频网站 技术栈 Python PyQT undetected_chromedriver
西门子S7-1200双套三坐标6轴联动控制系统的设计与实现
04-03
内容概要：本文详细介绍了西门子S7-1200双套三坐标6轴联动控制系统的开发与调试经验。主要内容涵盖双PLC通信机制、轴控制逻辑、安全联锁设计以及触摸屏程序绑定等方面。文中通过具体代码示例展示了如何利用SCL语言实现高效稳定的多轴联动控制，并分享了实际项目中的最佳实践和技术难点解决方案。此外，还讨论了程序结构优化、报警代码设计、数据块管理等关键环节，强调了模块化设计思想的应用及其带来的效率提升。 适合人群：从事工业自动化领域的工程师，尤其是熟悉西门子PLC编程的专业人士。 使用场景及目标：适用于需要进行复杂运动控制的自动化生产线，如汽车制造、电子装配等行业。主要目标是提高生产效率，确保设备运行的安全性和稳定性。 其他说明：文中提到的许多技术和方法不仅限于特定型号的PLC，对于其他品牌的控制器也有一定的借鉴意义。同时，提供的代码片段可以直接应用于类似项目中，帮助开发者快速搭建可靠的控制系统。
NFC Tools Pro
04-03
NFC Tools是一个应用程序，允许你在你的 NFC 标签和其他 RFID 兼容芯片上读取或写入或编程代码任务。NFC Tools PRO版本包括很多其他的附加功能，比如配置文件管理等。保存你的NFC标签或任务的配置文件，以便你以后重新使用它们。导出和导入很容易。NFC Tools PRO官方版允许你直接从现有的 NFC 标签导入你的记录或任务。 你可以很快编辑你的标签。此外还可以直接运行你的任务配置文件，不需要NFC 标签。
protobuf-6.30.1-py3-none-any.whl
04-03
该资源为protobuf-6.30.1-py3-none-any.whl，欢迎下载使用哦！
FLAC3D中壳单元与衬砌单元内力提取及处理技巧
最新发布
04-03
内容概要：本文详细介绍了如何在FLAC3D中提取壳单元和衬砌单元的关键内力数据，如弯矩、轴力和剪力。针对壳单元，文中提供了具体的FISH命令和函数，展示了如何利用gp.extra属性提取弯矩，并强调了局部坐标系方向的重要性。对于衬砌单元，则介绍了专门的命令和注意事项，如使用liner组件提取轴力和剪力，以及如何处理弯矩数据。此外，还分享了一些实用的经验和技巧，如批量数据处理、单位换算、内力符号规则等。最后，提到了使用Python进行后处理的方法，将提取的数据转化为更直观的形式，便于进一步分析。 适合人群：从事岩土工程、隧道工程及相关领域的工程师和技术人员，尤其是对FLAC3D有一定基础的用户。 使用场景及目标：帮助用户掌握FLAC3D中壳单元和衬砌单元内力提取的具体方法，提高工作效率，确保数据分析的准确性。适用于需要进行结构内力分析、支护设计优化等项目的工程师。 其他说明：文章不仅提供了详细的命令和函数示例，还分享了许多实战经验和常见错误的规避方法，有助于初学者少走弯路。同时，强调了内力符号规则和单位换算的重要性，避免因疏忽导致的重大失误。
ST PMSM FOC电机控制资料包2.0：全面解析STM32电机控制核心技术与实战技巧
04-03
内容概要：本文详细介绍了ST公司发布的HL07:ST PMSM FOC电机控制资料包2.0的内容及其应用。资料包涵盖了ST芯片电机控制的全源代码、详细文档、多个工程源码、stm32库培训资料及例程源码。文中通过具体的代码示例，如GPIO初始化、PWM配置、ADC采样、Clarke变换、PID调节器、SVPWM生成等，深入剖析了电机控制的关键技术和优化技巧。此外，还揭示了一些隐藏的技术细节和调试技巧，如硬件同步、动态调整PID参数、电机参数自识别等。 适合人群：电机控制工程师、嵌入式开发人员、尤其是对STM32和FOC算法感兴趣的开发者。 使用场景及目标：帮助读者深入了解ST芯片电机控制的具体实现，掌握从硬件配置到算法优化的全过程，提高实际项目的开发效率和质量。适用于需要进行电机控制系统设计、调试和优化的工程项目。 其他说明：资料包中的代码和文档非常实用，提供了丰富的实战经验和优化建议，尤其适合初学者和有一定基础的研发人员。同时，文中提到的一些特殊技巧和注意事项有助于避免常见的开发陷阱，提升系统的稳定性和性能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

码农研究僧

你的鼓励将是我创作的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值