vue调试（详解vuex中的this.$store.dispatch方法）
导读：vuex中的this.$store.dispatch方法 main.js...
vuex中的this.$store.dispatch方法
main.js
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方法内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！
声明：本站所有文章 ，如无特殊说明或标注 ，均为本站原创发布 。任何个人或组织 ，在未征得本站同意时 ，禁止复制 、盗用 、采集 、发布本站内容到任何网站 、书籍等各类媒体平台 。如若本站内容侵犯了原著者的合法权益 ，可联系我们进行处理 。
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！