我的编程空间,编程开发者的网络收藏夹
学习永远不晚

详解vuex中的this.$store.dispatch方法

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

详解vuex中的this.$store.dispatch方法

vuex中的this.$store.dispatch方法

main.js

new Vue({
   el:'#app',
   router,
   store,
   render:h=>h(APP)
 })

在这里插入图片描述

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import app from './modules/app'
import user from '.modules/user'
import getters from '.getters'
import permission from './modules/permission'

Vue.use(Vuex)
 const store=new Vuex.Store({
    modules:{
        permission,
	app,
	user
},
getters
})
export default store

在这里插入图片描述

在store/modules文件夹里的user.js,声明user并释放出来。

const user = {
  state: {
    token: '',
    roles: null,
    isMasterAccount:true,
  },

  mutations: {
    SET_TOKEN: (state, token) => {
      state.token ="Bearer " +token 
    },
  },
  actions: {
    // 登录
    Login({
      commit
    }, userInfo) {
      return new Promise((resolve, reject) => {
        login(userInfo.account, userInfo.password).then(x => {
          if(x.status==200){
            const tokenV = x.data.token.tokenValue
            commit('SET_TOKEN', tokenV)
            document.cookie=`AuthInfo=Bearer ${tokenV};path:/`;
            token="Bearer "+tokenV;
            //setToken("Bearer " +token)
            resolve();
          }
          
        }).catch(error => {
          console.log("登录失败")
          reject(error)
        })
      })
    },
  }
}
export default user

注:必须要用commit(‘SET_TOKEN’, tokenV)调用mutations里的方法,才能在store存储成功。

handleLogin() {
   this.loading = true
    this.$store.dispatch('Login', this.loginForm).then(() => {
           this.$router.push({
               path: '/manage/merchant/account'
           }); //登录成功之后重定向到首页
           this.loading = false
           // this.$router.push({ path: this.redirect || '/' })
       }).catch(() => {
           this.loading = false
       })
     }

this.$store.dispatch(‘Login’, this.loginForm)来调取store里的user.js的login方法,从而要更新。

vuex 中dispatch 和 commit 的用法和区别

dispatch:含有异步操作,例如向后台提交数据,写法: this.$store.dispatch('action方法名',值)

commit:同步操作,写法:this.$store.commit('mutations方法名',值)

到此这篇关于vuex中的this.$store.dispatch方法的文章就介绍到这了,更多相关vuex中this.$store.dispatch方法内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

详解vuex中的this.$store.dispatch方法

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

详解vuex中的this.$store.dispatch方法

这篇文章主要介绍了vuex中的this.$store.dispatch方法,必须要用commit(‘SET_TOKEN’, tokenV)调用mutations里的方法,才能在store存储成功,需要的朋友可以参考下
2022-11-13

vuex中this.$store.commit和this.$store.dispatch的基本用法实例

在vue的项目里常常会遇到父子组件间需要进行数据传递的情况,下面这篇文章主要给大家介绍了关于vuex中this.$store.commit和this.$store.dispatch的基本用法的相关资料,需要的朋友可以参考下
2023-01-06

vuex中store.commit和store.dispatch的区别及使用方法

这篇文章主要介绍了vuex中store.commit和store.dispatch的区别及使用方法,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
2023-01-10

Nodejs中的this详解

以下内容都是关于在nodejs中的this而非javascript中的this,nodejs中的this和在浏览器中javascript中的this是不一样的。 在全局中的thisconsole.log(this); {} this.num
2022-06-04

c++中this指针的用法详解

this 指针是 c++ 中的特殊指针,指向当前对象实例,用于访问成员变量、调用成员函数,传递给其他函数,限制对成员的访问,以及与其他指针区分。this 指针在 C++ 中的用法this 指针是什么?this 指针是一个指向当前对象实例
c++中this指针的用法详解
2024-05-08

Java 中This用法的实例详解

Java 中This用法的实例详解用类名定义一个变量的时候,定义的只是一个引用,外面可以通过这个引用来访问这个类里面的属性和方法。 那们类里面是够也应该有一个引用来访问自己的属性和方法纳? 呵呵,Java提供了一个很好的东西,
2023-05-31

JavaScript中的this关键字用法详解

在编写JavaScript应用的时候,我们经常会使用this关键字。那么this关键字究竟是怎样工作的,它的设计有哪些好的地方,有哪些不好的地方,本文带大家全面系统地认识这个老朋友,感兴趣的小伙伴可以借鉴阅读
2023-05-19

vue项目中的this.$get,this.$post等$的用法案例详解

vue.js的插件应该暴露一个install方法。这个方法的第一个参数是vue构造器,第二个参数是一个可选的选项对象,首页要安装axios,本文结合案例代码给大家详细讲解vue中的this.$get,this.$post等$的用法,一起学习下吧
2022-12-10

vue3.2中的vuex使用详解

这篇文章主要介绍了vue3.2中的vuex使用详解,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2023-05-15

vuex存储数据的几种方法实例详解

在浏览网页时我们有些时候需要记住一些用户选择的信息,比如登陆时我们如果选择了记住密码,那么我们下次进入该网页时就会有你上次的登陆信息,下面这篇文章主要给大家介绍了关于vuex存储数据的几种方法,需要的朋友可以参考下
2022-11-13

编程热搜

目录