前端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中实现表单地区选择与级联联动示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-09-09
这篇文章主要为大家详细介绍了Vue实现手机计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
这篇文章主要和大家一起学习vue.js条件渲染，代码注释详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
这篇文章主要介绍了Vue.js如何获取data-*的值，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了在vue自定义组件中使用 v-model指令详情，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-06-06
本篇文章主要介绍了vue基于mint-ui的城市选择3级联动的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
本文主要介绍了vue-cli5搭建vue项目的实现步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-05-05
这篇文章主要介绍了在vue中使用G2图表的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-03-03
Vue Element-UI中el-table实现单选的示例代码
在element-ui中是为我们准备好了可直接使用的单选与多选属性的,本文主要介绍了Vue Element-UI中el-table实现单选的示例代码,具有一定的参考价值,感兴趣的可以了解一下2023-12-12
watch 是由用户定义的数据监听，当监听的属性发生改变就会触发回调，这项配置在业务中是很常用。在面试时，也是必问知识点，一般会用作和 computed 进行比较。那么本文就来带大家从源码理解 watch 的工作流程，以及依赖收集和深度监听的实现2022-10-10
最新评论