首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vuex this.$store.dispatch()与this.$store.commit()区别

vuex之this.$store.dispatch()与this.$store.commit()的区别及说明

2023-06-27 10:40:59 作者：蜗牛杨哥

这篇文章主要介绍了vuex之this.$store.dispatch()与this.$store.commit()的区别及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

this.$store.dispatch()与this.$store.commit()的区别及说明

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

this.$store.dispatch()：含有异步操作，例如向后台提交数据，写法：this.$store.dispatch(‘action方法名’,值)
this.$store.commit()：同步操作，，写法：this.$store.commit(‘mutations方法名’,值)

commit: 同步操作

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

取值 this.$store.state.changeValue

dispatch: 异步操作

存储 this.$store.dispatch('getlists',name)

取值 this.$store.getters.getlists

案例：

Vuex文件 src/store/index.js

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

组件JS部分 : src/components/Header.vue

<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>

组件JS部分 : src/components/Login.vue

<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>

两个方法其实很相似，关键在于一个是同步，一个是异步

commit: 同步操作

this.$store.commit('方法名',值) //存储
this.$store.state.'方法名' //取值

dispatch: 异步操作

this.$store.dispatch('方法名',值) //存储
this.$store.getters.'方法名' //取值

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

其他了解：

commit => mutations, 用来触发同步操作的方法.
dispatch => actions, 用来触发异步操作的方法.

在store中注册了mutation和action

在组件中用dispatch调用action,用commit调用mutation

vue中Error in mounted hook: “TypeError: this.$store.$dispatch is not a function“ 报错

这个错误属于语法错误，初学者经常犯的错误。

解决方法

将$dispatch改为dispatch

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。