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

 更新时间:2022年11月04日 10:40:53   作者:阿珊和她的猫  
这篇文章主要介绍了vuex中的this.$store.dispatch方法,必须要用commit(‘SET_TOKEN’, tokenV)调用mutations里的方法,才能在store存储成功,需要的朋友可以参考下

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方法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue仿手机qq的实例代码(demo)

    Vue仿手机qq的实例代码(demo)

    Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。这篇文章给大家介绍Vue仿手机qq的实例代码,需要的的朋友参考下吧
    2017-09-09
  • vue项目安装scss常见报错处理方式

    vue项目安装scss常见报错处理方式

    这篇文章主要介绍了vue项目安装scss常见报错处理方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • 解决echarts图表y轴数据间隔过大的问题

    解决echarts图表y轴数据间隔过大的问题

    这篇文章主要介绍了解决echarts图表y轴数据间隔过大的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-03-03
  • Vue3通用API功能示例剖析

    Vue3通用API功能示例剖析

    这篇文章主要为大家介绍了Vue3通用API功能示例剖析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05
  • vue中的router-view父子组件传参方式

    vue中的router-view父子组件传参方式

    这篇文章主要介绍了vue中的router-view父子组件传参方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-01-01
  • Vue设置长时间未操作登录自动到期返回登录页

    Vue设置长时间未操作登录自动到期返回登录页

    这篇文章主要介绍了Vue设置长时间未操作登录以后自动到期返回登录页,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2020-01-01
  • 一步步教你用Vue.js创建一个组件(附代码示例)

    一步步教你用Vue.js创建一个组件(附代码示例)

    组件(Component)是Vue.js最强大的功能之一,组件可以扩展HTML元素,封装可重用的代码,下面这篇文章主要给大家介绍了关于如何一步步用Vue.js创建一个组件的相关资料,需要的朋友可以参考下
    2022-12-12
  • vue中node_modules中第三方模块的修改使用详解

    vue中node_modules中第三方模块的修改使用详解

    这篇文章主要介绍了vue中node_modules中第三方模块的修改使用,本文图文并茂给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-05-05
  • 浅析对Vue中keep-alive缓存组件的理解

    浅析对Vue中keep-alive缓存组件的理解

    <keep-alive> 是一个抽象组件,用于将其内部的组件保留在内存中,而不会重新渲染,这意味着当组件在<keep-alive> 内部切换时,其状态将被保留,而不是被销毁和重新创建,这篇文章主要介绍了Vue中的keep-alive缓存组件的理解,需要的朋友可以参考下
    2024-01-01
  • vue3 element-plus 实现表格数据更改功能详细步骤

    vue3 element-plus 实现表格数据更改功能详细步骤

    这篇文章主要介绍了vue3 element-plus实现表格数据更改功能,本文分步骤结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-07-07

最新评论