vuex中 this.$store.dispatch() 与 this.$store.commit()方法的区别

1：Vuex是什么？

所谓的Vuex其实是一个为Vue.js设计的数据仓库，把各个组件公用的数据放到一个仓库里面进行统一的管理

Vuex优点：

• 既使非父子组件间的数据共享也能变得简单明了
• 让程序变得更加可维护（将数据抽离了出来）
• 只要仓库里面的数据发生了变化，在其他组件里面数据被引用的地方也会自动更新

Vuex怎么用？

先用vue-cli安装项目框架

@vue/cli用法

Yarn

yarn global add @vue/cli

npm

npm install -g @vue/cli

安装Vuex

Yarn

yarn add vuex

npm

npm install vuex --save

2：两者之间的区别，只是存取方式不同，两个方法都是传值给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

3：示例

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

src/components/Header.vue

<script>
// 使用vux的 mapState需要引入
import { mapState } from "vuex";

export default {
  // 官方推荐: 给组件name, 便于报错时的提示
  name: "Header",
  // 引入vuex 的 store 中的state值, 必须在计算属性中书写!
  computed: {
    // mapState辅助函数, 可以快速引入store中的值
    // 此处的login代表,  store文件中的 state 中的 login, 登录状态
    ...mapState(["login"])
  },
  methods: {
    logout() {
      this.$store.commit("doLogout");
    }
  }
};
</script>

src/components/Login.vue

<script>
export default {
  name: "Login",
  data() {
    return {
      userName: "",
      userPwd: ""
    };
  },
  methods: {
    doLogin() {
      let data={
        userName:this.userName,
        userPwd:this.userPwd
      }
       this.axios.post("请求接口地址", data).then(res => {
          let code = res.data.code;
          if (code == 200) {
            // 路由跳转指定页面
            this.$router.push({ path: "/" });
            // 更新 vuex 的 state的值, 必须通过 mutations 提供的方法才可以
            // 通过 commit('方法名') 就可以出发 mutations 中的指定方法
            this.$store.commit("doLogin");
          }
        })
        .catch(err => {
          console.error(err);
        });
    }

  }
};
</script>