前端vuex中dispatch的使用
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
(图片来源网络,侵删)
文章目录
- 前言
- 一、vuex和this.$store.dispatch是什么?
- 二、使用方法
- 总结
前言
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) }); }); }
总结
Vuex是专为Vue.js应用程序开发的状态管理模式。
this.$store.dispatch是用于触发vuex中action的方法。
文章版权声明:除非注明,否则均为主机测评原创文章,转载或复制请以超链接形式并注明出处。