位置: IT常识 - 正文

vuex中this.$store.commit和this.$store.dispatch的用法

编辑:rootadmin
vuex中this.$store.commit和this.$store.dispatch的用法 前言

推荐整理分享vuex中this.$store.commit和this.$store.dispatch的用法,希望有所帮助,仅作参考,欢迎阅读内容。

vuex中this.$store.commit和this.$store.dispatch的用法

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

this.store.dispatch()与this.store.dispatch() 与 this.store.dispatch()与this.store.commit()方法的区别总的来说他们只是存取方式的不同,两个方法都是传值给vuex的mutation改变state

区别this.$store.commit() 同步操作this.$store.commit('方法名',值)【存储】this.$store.state.方法名【取值】this.$store.dispatch() 异步操作this.$store.dispatch('方法名',值)【存储】this.$store.getters.方法名【取值】

当操作行为中含有异步操作: 比如向后台发送请求获取数据,就需要使用action的dispatch去完成了。 其他使用commit即可。

commit => mutations,用来触发同步操作的方法。 dispatch =>actions,用来触发异步操作的方法。 在store中注册了mutation和action,在组件中用dispatch调用action,然后action用commit调用mutation。

实战this.$store.commit()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; } }});<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><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>this.$store.dispatch()toggleSideBar() { this.$store.dispatch('app/toggleSideBar') }, async logout() { await this.$store.dispatch('user/logout') this.$router.push(`/login?redirect=${this.$route.fullPath}`) }const mutations = { SET_TOKEN: (state, token) => { state.token = token }, SET_INTRODUCTION: (state, introduction) => { state.introduction = introduction }, SET_NAME: (state, name) => { state.name = name }, SET_AVATAR: (state, avatar) => { state.avatar = avatar }, SET_ROLES: (state, roles) => { state.roles = roles }}const actions = { // user login login({ commit }, userInfo){ const { username, password,useraccount} = userInfo; return new Promise((resolve, reject) => { login(({userName:username,userAccount:useraccount,userPassword:password})).then(response=>{ const data=response; commit('SET_TOKEN', 1) setToken(null) commit('SET_ROLES', 1) commit('SET_NAME', 1) commit('SET_AVATAR', 1) commit('SET_INTRODUCTION', 1) resolve() }).catch(error => { reject(error) // debugger; // $Message("密码或账号不对") }) }).catch(error => { reject(error) }) }}
本文链接地址:https://www.jiuchutong.com/zhishi/295960.html 转载请保留说明!

上一篇:在vue3+ts项目里使用query和params传参(vue3加ts)

下一篇:Vue项目保持用户登录状态(localStorage + vuex 刷新页面后状态依然保持)(vuex存储用户信息)

  • 存货盘亏进项税额转出是什么意思
  • 什么是涉税信息
  • 房产税从价计征和从租怎么选择
  • 档案室图书应该做哪个会计科目
  • 股东分红需要开股东会决定吗?
  • 财务费用利息收入结转本年利润
  • 企业季度报什么税
  • 什么企业可以开增值税专用发票
  • 所得税一般纳税人几个点
  • 销售商品,提供服务以及从事其他经营活动
  • 现金支出的一般程序
  • 税率变化递延所得税资产如何调整
  • 收到存款利息属于现金流量表
  • 私车公用违规吗
  • 职工死去还有工资吗
  • 新成立的分公司怎么样
  • 企业境外收入税率
  • 财务刻章属于什么行业
  • 事业单位零余额账户使用流程
  • 开机后网络连接很慢
  • php mysql pdo
  • win10 热键
  • 盈余 盈利
  • 增加办税人员需要带什么材料
  • PHP:pg_field_size()的用法_PostgreSQL函数
  • 罚款计入营业外支出影响当期损益
  • 微信小程序不方便
  • 河马是站在睡觉吗
  • 企业收到海河工厂发运的乙材料,并验收入库
  • YII Framework的filter过滤器用法分析
  • 股东借款转增资本公积要验资吗
  • 暂估库存商品计算怎么算
  • vant的Uploader 文件上传,图片数据回显问题
  • 公司注销后如何追缴税款
  • mongo groupby
  • 数组和结构体
  • 天猫的费用
  • SQLSERVER2008中CTE的Split与CLR的性能比较
  • 出口货物退运已补税(未退税)证明
  • 小规模减免附加税会计分录怎么做
  • 保险再保业务
  • 改变记帐方式的原因
  • 出口不报关账务处理
  • 增值税专用发票怎么开
  • 银行日记账上月的余额要结转吗
  • 支付结算的法律构成
  • 企业汇算清缴需要提供什么资料
  • 行政事业单位如何开发票
  • mysql子查询效率如何
  • mysql备份与恢复数据库
  • sqlserver数据库怎么导出
  • mysql 错误1067
  • Win7旗舰版系统文件名称
  • WINDOWS操作系统最新版本
  • imessage对方看了会显示已读吗
  • solaris 11.4
  • 获取方法
  • windows8.
  • win7鼠标右键菜单选项太多怎么删除
  • win8商店还能用吗
  • 安装和配置eclipse集成开发环境
  • 查找返回一行数据
  • linux系统的内存分配和回收采用什么算法?
  • linux服务器日志文件在哪里
  • opengl绘制ui
  • 移动端网页开发技术
  • 十大经典排序算法总结
  • dos命令查看磁盘分区
  • 如何大小写字母转换
  • unity接入安卓sdk
  • 利用pm2部署多个设备
  • void方法设置断言
  • android使用方法
  • javascript函数
  • javascript函数大全
  • 宁夏电子税务局登录入口
  • 进项税跨月转出
  • 手机微信怎么预约
  • 工程增值税率从11%调整到9%
  • 上饶国资委领导班子成员名单
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设