[JavaScript知识库]vue项目分析--this.$store.dispatch()&this.$store.commit()&vuex.store()

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

这两个的区别是存取的方式不同，两个都是传值给vuex的mutation改变state
this.$store.dispatch()含有异步操作，可以向后台提交数据

this.$store.dispatch("action的方法名",value)

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

this.$store.commit()同步操作

this.$store.commit("mutations方法名",value)

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

可以看到先把vue和vuex使用import引入，之后使用vue.use把vuex作为组件引入（vue.use是把vue文件引入成为组件）
之后store变量是实例化一个vuex.store
store实例里的state是用于保存共享的状态值的，默认是不登录的
mutations里是方法，专门用于改变state里的数值，登入登出的时候保存一下状态
组件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>

在computed里使用mapstate快速引入store里的登录状态的值
之后在这个组件文件里写一个方法使用this.$store.commit调用store里的用户登出的方法
https://blog.csdn.net/qq_44317018/article/details/105784086

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

header组件里是调用了登录出的方法
登录组件里数据里是用户名和密码
登录方法里获取当前的用户名和方法之后使用axois.post方法把数据post到用户登录的php文件，之后处理返回的代码，代码等于1就是登录成功的，并且使用$router.push转到首页url，并且调用store里的登录方法把共享登录状态变成true

mapstate（辅助函数–一个组件需要获取多个状态的时候，把这些状态都声明为计算属性会有一些重复和冗余，所以使用mapstate帮助生成计算属性，映射的计算属性的名称与state的子节点名称相同的时候也可以给mapstate传递一个字符串数组）

vuex

https://vuex.vuejs.org/zh/guide/state.html
vuex是为vue设计的状态管理模式，是可以使用devtools 进行调试的
在vuex 出现之前，vue里的状态实际上是单向数据流状态，state是一个数据源，view以声明的方式把state映射到视图，actions响应view上的用户输入产生的状态变化，但是解决不了多个组件共享状态的问题
所以vuex使用state存放共享的状态，使用mutations操作state，使用store.commit主动的操作mutations
state是单一状态树
vuex使用单一状态树可以使用一个对象包含全部的应用层级状态，state就是数据源
如何在组件里获得vuex 状态？
https://zhidao.baidu.com/question/1452375332596951220.html
vuex的状态存储是响应式的，所以从store实例里读取状态可以使用计算属性返回某个状态
比如在store/state.js里声明了数据源
之后在组件里引用的话直接使用this.$store.state.count即可
不过在组件里引入之前需要先在入门文件也就是app.vue里先import store from “./store” 并且在new vue实例的时候加上store，这样就可以全局调用了