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

约定不等于承诺〃 2022-10-10 12:31 271阅读 0赞

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>

发表评论取消回复

表情：

评论列表（有 0 条评论，271人围观）

还没有评论，来说两句吧...

相关阅读

相关 vuex中的state

vuex中的state 简介本文讲解vuex中的state使用方法。入门讲解首先第一步肯定是创建vue项目，具体操作看这篇文章：[用命令窗口的方式创建

小鱼儿/ 2024年03月16日 13:35/ 0 赞/ 39 阅读

相关 vuex中 this.$store.dispatch() 与 this.$store.commit() 的区别

this.$store.dispatch() 与 this.$store.commit()方法总体来说只是存取方式的不同,两个方法都是传值给vuex的mutation改变sta

约定不等于承诺〃/ 2022年10月10日 12:31/ 0 赞/ 272 阅读

相关 vuex中直接修改state 与 commit来修改state的区别

背景当我们使用vuex进行状态管理的时候，我们总是会看到一句话`更改Vuex 的store 中的状态的唯一方法是提交commit`zongz，那么我们不提交`commi

迷南。/ 2022年10月10日 01:27/ 0 赞/ 234 阅读

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

1：Vuex是什么？所谓的Vuex其实是一个为Vue.js设计的数据仓库，把各个组件公用的数据放到一个仓库里面进行统一的管理 Vuex优点：既使非父子组件间的数

我会带着你远行/ 2022年09月14日 14:24/ 0 赞/ 288 阅读

相关 Vuex的使用（一）——在项目中引入Vuex

参考文档：https://vuex.vuejs.org/zh/guide/ 如果当前没有项目代码，可以访问[传送门][Link 1]搭建一个，以下Vuex相关功能都是在传送门

港控/mmm°/ 2022年09月09日 06:41/ 0 赞/ 243 阅读

相关 JAVA中“&”与“&&”，“|”与“||”的区别

JAVA中：逻辑运算符有：”&&”（短路与），”&”，”|”，”||”（短路或）。 “&&”和“&”的区别： “&&”：只要第一个条件为false，后面条件就不再

喜欢ヅ旅行/ 2022年06月13日 10:42/ 0 赞/ 357 阅读

相关 vuex中的modules

vuex中将数据模块化 1. 在vuex中将组件模块化，注意：加属性：namespaced：true；命名空间 const downloade = {

Love The Way You Lie/ 2022年02月26日 09:10/ 0 赞/ 247 阅读

相关 vuex中的actions

actions用来处理mutations中的异步操作，触发mutations中的函数 1. 组件中触发actions中的函数：此处用dispatch触发函数 this.$s

╰半夏微凉°/ 2022年02月26日 06:06/ 0 赞/ 282 阅读

相关 nuxt，axios中使用Vuex【获取Vuex中的值】

> 登录的时候，需要设置一个token请求头，想在axios里面全局配置一下 > 找了半天，终于被我找到了。? 1、配置vuex [https://blog.csdn.n

冷不防/ 2021年11月22日 11:38/ 0 赞/ 705 阅读

相关 Vue中的Vuex

目录一，vuex介绍二，vuex计数器案例三，vuex的getter 四，vuex的辅助函数五，使用vuex时表单的处理六，vuex中分模块开发 ---

ゝ一纸荒年。/ 2021年08月19日 20:07/ 0 赞/ 458 阅读