Vuex之this.$store.dispatch方法 - zhangxiulin/RuoYi-Vue GitHub Wiki
单一状态管理库vuex，dispatch派发了一个异步动作 写法：this.$store.dispatch('action方法名',值) 。
同步操作：this.$store.commit()，写法：this.$store.commit('mutations方法名',值)
示例
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 tagsView from './modules/tagsView'
import permission from './modules/permission'
import settings from './modules/settings'
import getters from './getters'
Vue.use(Vuex)
const store = new Vuex.Store({
modules: {
app,
user,
tagsView,
permission,
settings
},
getters
})
export default store
在store/modules文件夹里的user.js,声明user并释放出来
import { login, logout, getInfo } from '@/api/login'
import { getToken, setToken, removeToken } from '@/utils/auth'
const user = { state: { token: getToken(), name: '', avatar: '', roles: [], permissions: [] },
mutations: { SET_TOKEN: (state, token) => { state.token = token } },
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) }) }) } }
export default user
注：必须要用commit(‘SET_TOKEN’, tokenV)调用mutations里的方法，才能在store存储成功
login.vue
handleLogin() {
this.$refs.loginForm.validate(valid => {
if (valid) {
this.loading = true;
if (this.loginForm.rememberMe) {
Cookies.set("username", this.loginForm.username, { expires: 30 });
Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });
Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });
} else {
Cookies.remove("username");
Cookies.remove("password");
Cookies.remove('rememberMe');
}
this.$store
.dispatch("Login", this.loginForm)
.then(() => {
this.$router.push({ path: this.redirect || "/" });
})
.catch(() => {
this.loading = false;
this.getCode();
});
}
});
this.$store.dispatch(‘Login’, this.loginForm)来调取store里的user.js的login方法，从而更新。