this.$store.dispatch() 与 this.$store.commit()方法的区别

总的来说他们只是存取方式的不同,两个方法都是传值给vuex的mutation改变state

commit: 同步操作

存储

this.$store.commit('changeValue',name)

取值

this.$store.state.changeValew

dispatch: 异步操作
存储

this.$store.dispatch('getlista',name)

取值

this.$store.getters.getlists

案例:

login.vue
this.$store .dispatch(
"Login", this.loginForm) .then(() => { this.$router.push({ path: this.redirect || "/" });//登陆成功后,重定向到首页 }) .catch(() => { this.loading = false; this.getCode(); });
@store/index.js
actions: {
// 登录 Login({ commit }, userInfo) { const username = userInfo.username.trim() const password = userInfo.password const code = userInfo.code const uuid = userInfo.uuid return new Promise((resolve, reject) => { login(username, password, code, uuid).then(res => { setToken(res.token) commit('SET_TOKEN', res.token) resolve() }).catch(error => { reject(error) }) }) }, }

 

posted @ 2021-03-01 00:05  codeing123  阅读(1710)  评论(0编辑  收藏  举报