前端vuex中dispatch的使用方法总结

更新时间：2024年04月27日 14:47:16 作者：qq_41148615

这篇文章主要给大家介绍了关于前端vuex中dispatch使用方法的相关资料,vuex的dispatch方法用于触发一个action,以便更新state,文中通过代码介绍的非常详细,需要的朋友可以参考下

前言

Vuex中dispatch的用法！

一、vuex和this.$store.dispatch是什么？

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

this.$store.dispatch: this.$store.dispatch是用于触发vuex中action的方法。

二、使用方法

#基础用法
this.$store.dispatch('actionName');

#实际案例(登录)

this.$store.dispatch('LoginByUsername', this.loginForm).then(() => {
  this.$router.push({ path: '/' }); //登录成功之后重定向到首页
}).catch(err => {
  this.$message.error(err); //登录失败提示错误
});

action:

LoginByUsername({ commit }, userInfo) {
  const username = userInfo.username.trim()
  return new Promise((resolve, reject) => {
    loginByUsername(username, userInfo.password).then(response => {
      const data = response.data
      Cookies.set('Token', response.data.token) //登录成功后将token存储在cookie之中
      commit('SET_TOKEN', data.token)
      resolve()
    }).catch(error => {
      reject(error)
    });
  });
}

附：dispatch和commit的作用和区别

相同点：二者最终都是用来提交mutation来更改state的值的

不同点：dispacth用于异步操作修改state,commit用于同步操作来修改state

总结

Vuex是专为Vue.js应用程序开发的状态管理模式。

this.$store.dispatch是用于触发vuex中action的方法。

到此这篇关于前端vuex中dispatch的使用方法的文章就介绍到这了,更多相关vuex中dispatch使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue
dispatch

uniapp+Vue3 组件之间的传值方法示例详解
文章主要介绍了父子传值、兄弟传值和provide/inject三种在Vue中进行组件间通信的方法,感兴趣的朋友跟随小编一起看看吧
2025-03-03
详解HTTP4种方法(GET、POST、 PUT和DELETE)
本文介绍了HTTP协议中的四种方法：GET、POST、PUT和DELETE,分别用于不同的操作,GET用于获取数据,POST用于提交数据,PUT用于创建或更新资源,DELETE用于删除资源,每种方法都有其特点和适用场景,了解这些方法有助于更好地进行数据交互和开发,感兴趣的朋友一起看看吧
2025-02-02
Element Dropdown下拉菜单的使用方法
这篇文章主要介绍了Element Dropdown下拉菜单的使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-07-07
Vue+ECharts+高德地图API实现天气预报数据可视化的教程
所谓数据可视化，我们可以理解为从宏观角度来看一眼就能看出来整个数据的占比，走向，对于数据可视化，很多互联网公司是很看重这一块的，包括大厂，本就将给大家介绍如何通过Vue+ECharts+高德地图API实现天气预报数据可视化
2023-06-06
基于Vue3文件拖拽上传功能实现
这篇文章主要介绍了Vue3文件拖拽上传功能,支持拖拽到此区域上传，支持选择多个文件/文件夹，代码很简单，对vue3拖拽上传功能感兴趣的朋友一起看看吧
2022-10-10
Vue2/3 登录后用户无操作半小时后自动清除登录信息退出登录下线(示例代码)
这篇文章主要介绍了Vue2/3 登录后用户无操作半小时后自动清除登录信息退出登录下线,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
2024-07-07
vite proxy同时配置多个代理方式
文章介绍如何在前端开发中配置多个代理进行本地mock,以便同时处理开发完成和未开发完成的接口,主要步骤包括修改`.env.development`文件,创建并配置`request-mock.js`文件,以及在`vite.config.js/ts`中添加代理配置
2025-12-12
vue引入swiper插件的使用实例
本篇文章主要介绍了vue引入swiper插件的使用实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-07-07
整理项目中vue.config.js打包优化配置方法
这篇文章主要介绍了整理项目中vue.config.js打包优化,包括配置 webpack-bundle-analyzer 插件查看文件大小及配置compression-webpack-plugin 用gzip压缩打包的文件大小，本文结合实例代码介绍的非常详细，需要的朋友可以参考下
2023-02-02
vue跳转页面打开新窗口,并携带与接收参数方式
这篇文章主要介绍了vue跳转页面打开新窗口，并携带与接收参数方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04