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) }) }) }, }