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

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