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

叶从峰

vuex中的this.$store.dispatch方法

main.js

1. new Vue({
   
2.    el:'#app',
   
3.    router,
   
4.    store,
   
5.    render:h=>h(APP)
   
6. })

复制代码

store/index.js

1. import Vue from 'vue'
   
2. import Vuex from 'vuex'
   
3. import app from './modules/app'
   
4. import user from '.modules/user'
   
5. import getters from '.getters'
   
6. import permission from './modules/permission'
   
7. 
   
8. Vue.use(Vuex)
   
9. const store=new Vuex.Store({
   
10.     modules:{
    
11.         permission,
    
12.         app,
    
13.         user
    
14. },
    
15. getters
    
16. })
    
17. export default store

复制代码

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

1. const user = {
   
2.   state: {
   
3.     token: '',
   
4.     roles: null,
   
5.     isMasterAccount:true,
   
6.   },
   
7. 
   
8.   mutations: {
   
9.     SET_TOKEN: (state, token) => {
   
10.       state.token ="Bearer " +token
    
11.     },
    
12.   },
    
13.   actions: {
    
14.     // 登录
    
15.     Login({
    
16.       commit
    
17.     }, userInfo) {
    
18.       return new Promise((resolve, reject) => {
    
19.         login(userInfo.account, userInfo.password).then(x => {
    
20.           if(x.status==200){
    
21.             const tokenV = x.data.token.tokenValue
    
22.             commit('SET_TOKEN', tokenV)
    
23.             document.cookie=`AuthInfo=Bearer ${tokenV};path:/`;
    
24.             token="Bearer "+tokenV;
    
25.             //setToken("Bearer " +token)
    
26.             resolve();
    
27.           }
    
28.          
    
29.         }).catch(error => {
    
30.           console.log("登录失败")
    
31.           reject(error)
    
32.         })
    
33.       })
    
34.     },
    
35.   }
    
36. }
    
37. export default user

复制代码

注：必须要用

1. commit(‘SET_TOKEN’, tokenV)

复制代码

调用

1. mutations

复制代码

里的方法，才能在

1. store

复制代码

存储成功。

1. handleLogin() {
   
2.    this.loading = true
   
3.     this.$store.dispatch('Login', this.loginForm).then(() => {
   
4.            this.$router.push({
   
5.                path: '/manage/merchant/account'
   
6.            }); //登录成功之后重定向到首页
   
7.            this.loading = false
   
8.            // this.$router.push({ path: this.redirect || '/' })
   
9.        }).catch(() => {
   
10.            this.loading = false
    
11.        })
    
12.      }

复制代码

1. this.$store.dispatch(‘Login’, this.loginForm)

复制代码

来调取

1. store

复制代码

里的

1. user.js的login

复制代码

方法，从而要更新。
vuex 中dispatch 和 commit 的用法和区别

dispatch：含有异步操作，例如向后台提交数据，写法： this.$store.dispatch('action方法名',值)
commit：同步操作，写法：this.$store.commit('mutations方法名',值)
到此这篇关于vuex中的this.$store.dispatch方法的文章就介绍到这了,更多相关vuex中this.$store.dispatch方法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/article/266705.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！