vuex中this.$store.commit和this.$store.dispatch的用法

编辑：rootadmin

vuex中this.$store.commit和this.$store.dispatch的用法前言

推荐整理分享vuex中this.$store.commit和this.$store.dispatch的用法，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助，希望把文章链接给更多的朋友！

this.store.dispatch()与this.store.dispatch() 与 this.store.dispatch()与this.store.commit()方法的区别总的来说他们只是存取方式的不同,两个方法都是传值给vuex的mutation改变state

区别this.$store.commit() 同步操作this.$store.commit('方法名',值)【存储】this.$store.state.方法名【取值】this.$store.dispatch() 异步操作this.$store.dispatch('方法名',值)【存储】this.$store.getters.方法名【取值】

当操作行为中含有异步操作: 比如向后台发送请求获取数据，就需要使用action的dispatch去完成了。其他使用commit即可。

commit => mutations,用来触发同步操作的方法。 dispatch =>actions,用来触发异步操作的方法。在store中注册了mutation和action，在组件中用dispatch调用action，然后action用commit调用mutation。

实战this.$store.commit()import Vue from "vue";import Vuex from "vuex";Vue.use(Vuex);export const store = new Vuex.Store({ // state专门用来保存共享的状态值 state: { // 保存登录状态 login: false }, // mutations: 专门书写方法,用来更新 state 中的值 mutations: { // 登录 doLogin(state) { state.login = true; }, // 退出 doLogout(state) { state.login = false; } }});<script>// 使用vux的 mapState需要引入import { mapState } from "vuex";export default { // 官方推荐: 给组件起个名字, 便于报错时的提示 name: "Header", // 引入vuex 的 store 中的state值, 必须在计算属性中书写! computed: { // mapState辅助函数, 可以快速引入store中的值 // 此处的login代表, store文件中的 state 中的 login, 登录状态 ...mapState(["login"]) }, methods: { logout() { this.$store.commit("doLogout"); } }};</script><script>export default { name: "Login", data() { return { uname: "", upwd: "" }; }, methods: { doLogin() { console.log(this.uname, this.upwd); let data={ uname:this.uname, upwd:this.upwd } this.axios .post("user_login.php", data) .then(res => { console.log(res); let code = res.data.code; if (code == 1) { alert("恭喜您, 登录成功! 即将跳转到首页"); // 路由跳转指定页面 this.$router.push({ path: "/" }); //更新 vuex 的 state的值, 必须通过 mutations 提供的方法才可以 // 通过 commit('方法名') 就可以出发 mutations 中的指定方法 this.$store.commit("doLogin"); } else { alert("很遗憾, 登陆失败!"); } }) .catch(err => { console.error(err); }); } }};</script>this.$store.dispatch()toggleSideBar() { this.$store.dispatch('app/toggleSideBar') }, async logout() { await this.$store.dispatch('user/logout') this.$router.push(`/login?redirect=${this.$route.fullPath}`) }const mutations = { SET_TOKEN: (state, token) => { state.token = token }, SET_INTRODUCTION: (state, introduction) => { state.introduction = introduction }, SET_NAME: (state, name) => { state.name = name }, SET_AVATAR: (state, avatar) => { state.avatar = avatar }, SET_ROLES: (state, roles) => { state.roles = roles }}const actions = { // user login login({ commit }, userInfo){ const { username, password,useraccount} = userInfo; return new Promise((resolve, reject) => { login(({userName:username,userAccount:useraccount,userPassword:password})).then(response=>{ const data=response; commit('SET_TOKEN', 1) setToken(null) commit('SET_ROLES', 1) commit('SET_NAME', 1) commit('SET_AVATAR', 1) commit('SET_INTRODUCTION', 1) resolve() }).catch(error => { reject(error) // debugger; // $Message("密码或账号不对") }) }).catch(error => { reject(error) }) }}

本文链接地址:https://www.jiuchutong.com/zhishi/295960.html 转载请保留说明！

上一篇：在vue3+ts项目里使用query和params传参(vue3加ts)

下一篇：Vue项目保持用户登录状态（localStorage + vuex 刷新页面后状态依然保持）(vuex存储用户信息)