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

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