vuex每日一学:了解this.$store.dispatch方法。
vuex中的thiss.$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
userer在store/modules文件夹中.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方法名,值)。
评论0