位置: 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存储用户信息)

  • 抖音里面喜欢的视频怎么删除(抖音里面喜欢的评论怎么删除)

    抖音里面喜欢的视频怎么删除(抖音里面喜欢的评论怎么删除)

  • excel表数字变成1.92E+怎么恢复(excel表数字变成1905)

    excel表数字变成1.92E+怎么恢复(excel表数字变成1905)

  • 拼多多评价是永久的吗(拼多多评价永久显示一年)

    拼多多评价是永久的吗(拼多多评价永久显示一年)

  • 微信删群别人会知道么(微信删除群别人会知道吗)

    微信删群别人会知道么(微信删除群别人会知道吗)

  • sharemmdz是什么文件夹(sharemmdz是什么文件夹可以删除吗)

    sharemmdz是什么文件夹(sharemmdz是什么文件夹可以删除吗)

  • 天猫赔付红包多久过期(天猫赔付红包多少钱)

    天猫赔付红包多久过期(天猫赔付红包多少钱)

  • 腾讯会议电脑版和手机版有什么区别(腾讯会议电脑版共享屏幕)

    腾讯会议电脑版和手机版有什么区别(腾讯会议电脑版共享屏幕)

  • 能看电视的软件有哪些(不用网络就能看电视的软件)

    能看电视的软件有哪些(不用网络就能看电视的软件)

  • p30屏幕录制在哪里找出来(华为p30屏幕录屏)

    p30屏幕录制在哪里找出来(华为p30屏幕录屏)

  • b站审核是人工还是机器(b站审核工作内容)

    b站审核是人工还是机器(b站审核工作内容)

  • ansys哪个版本是中文版(ansys哪一版比较好用?)

    ansys哪个版本是中文版(ansys哪一版比较好用?)

  • 微信解封有几种方法(微信解封有几种方法 最新微信解封方法)

    微信解封有几种方法(微信解封有几种方法 最新微信解封方法)

  • 手机键盘壁纸怎么设置(手机键盘壁纸怎么恢复默认)

    手机键盘壁纸怎么设置(手机键盘壁纸怎么恢复默认)

  • 苹果6听筒坏了如何自测(苹果听筒坏了要多少钱)

    苹果6听筒坏了如何自测(苹果听筒坏了要多少钱)

  • 货拉拉预约要先付款么(货拉拉预约用车要先付款么?)

    货拉拉预约要先付款么(货拉拉预约用车要先付款么?)

  • 仅紧急电话怎样解除(仅紧急电话怎样拉黑)

    仅紧急电话怎样解除(仅紧急电话怎样拉黑)

  • mx250相当于gtx多少

    mx250相当于gtx多少

  • vivox21ia支持nfc功能吗(vivox21是否支持nfc)

    vivox21ia支持nfc功能吗(vivox21是否支持nfc)

  • 电脑集成显卡在哪(电脑集成显卡在设备管理器找不到)

    电脑集成显卡在哪(电脑集成显卡在设备管理器找不到)

  • 苹果手机授信在哪里设置(苹果手机授信功能在哪设置)

    苹果手机授信在哪里设置(苹果手机授信功能在哪设置)

  • 为什么打别人电话一直在通话中(为什么打别人电话响了自动挂断)

    为什么打别人电话一直在通话中(为什么打别人电话响了自动挂断)

  • 怎样查询宽带是否欠费(怎样查询宽带是否正常连接)

    怎样查询宽带是否欠费(怎样查询宽带是否正常连接)

  • KB5000802补丁怎么卸载?Win10强制卸载补丁KB5000802的四种方法(kb5001028补丁)

    KB5000802补丁怎么卸载?Win10强制卸载补丁KB5000802的四种方法(kb5001028补丁)

  • 将scss文件转换成css文件(sass转化为css)

    将scss文件转换成css文件(sass转化为css)

  • Node.js 全网最详细教程 (第一章:Node学习入门必看教程)(nodejs.org)

    Node.js 全网最详细教程 (第一章:Node学习入门必看教程)(nodejs.org)

  • 国际避税地是什么
  • 纸质发票红冲操作流程
  • 发放股票股利增资
  • 物流企业账务流程
  • 增值税免退税计算方法
  • 专用发票丢失怎么抵扣
  • 商贸企业出口退税计算公式
  • 不动产在建工程使用的外购物资可以抵扣吗
  • 公司广告法违规交不起罚款怎么办
  • 进项较大航天信息怎么填
  • 运输业过路费怎么做账
  • 企业关闭股东拿回投资款需要交税吗
  • 单位给职工租房属于福利政策文件
  • 园林绿化公司前景如何
  • 自然人出租房屋房产税
  • 个人借支备用金限额
  • 免税的发票可以用来抵税吗
  • 门窗属于建材吗还是材料
  • 多付几分钱怎么做账
  • 坏账准备和资产减值损失
  • 键盘插上电脑却不能用
  • window10最新20h2
  • 你需要来自system的权限怎么解决
  • 总公司与分公司的账务处理
  • 固定资产占资产总额比例
  • 商场充值卡发票在哪开
  • 一个药厂能够生产药品的三个前提条件
  • 新公司免税额度是多少
  • 最高跑分纪录的显卡是什么
  • 详谈的详是什么意思
  • 外商投资合伙企业有哪些
  • 公转私备注用途
  • phpinfophp漏洞利用
  • 现在用yii框架的人还多么
  • thinkphp获取数据库数据
  • 有趣的html简单代码
  • 发票融资会计处理
  • ps大型文件储存位置在哪
  • ps橡皮擦不是圆圈了
  • 专项应付款能转出来吗
  • 税务局规定500元以下收据的要求
  • 交所得税怎么记账
  • 织梦图集的使用教程
  • 详解sql基础语法实验报告
  • 借贷记账法的记账规则是
  • 实收资本结转本年利润
  • 以前年度费用退回
  • 发票与销售小票有什么区别?
  • 收到上年度所得税退税款会计分录怎么写
  • 月末假退月初假领
  • 举办会议收入如何入账
  • 什么叫做未入账金额
  • 长期借款利息是财务费用吗
  • 从会计角度看会计刺客
  • 弥补上年亏损的分录 所得税
  • 库存商品的成本计算
  • 会计年终决算怎么填写
  • Linux环境下MySQL服务器优化的方法详解
  • 班班通一直正在启动什么原因
  • regsvc32.exe - regsvc32是什么进程 有什么用
  • diskmakerx制作u盘需要多久
  • win 10电脑怎么调虚拟内存
  • win8系统怎样
  • linux防病毒措施
  • Javascript之BOM(window对象)详解
  • bat注销命令
  • Android UI之GridLayout(网格布局)
  • python解析数据
  • js限制字符长度
  • Android使用opencv处理图片灰度
  • 文件管理android访问限制
  • js正则 \w
  • js map(parseint)
  • js模拟点击alert()确定
  • 青岛税务局领导
  • 河北农信登录密码错误
  • 信用社股金分红时间
  • 开普票需要提供合同吗
  • 滴灌带设备一套多少钱
  • 重置税务密码
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设