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

约定不等于承诺〃 2022-10-10 12:31 301阅读 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 条评论，301人围观）

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

相关阅读

相关 vuex中的getters

vuex中的getters 简介本文讲解vuex里面的getters的用法。这里是vue官方对其的介绍。 ![在这里插入图片描述][8e5a5af97f4

矫情吗；*/ 2024年03月16日 13:41/ 0 赞/ 69 阅读

相关 vuex中的state

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

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

相关 Vuex和sessionStorage的区别

Vuex和sessionStorage的区别主要区别 Vuex 主要特点集中式存储响应式更新

╰+攻爆jí腚メ/ 2023年10月13日 14:02/ 0 赞/ 16 阅读

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

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

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

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

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

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

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

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

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

相关 vuex中的modules

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

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

相关 vuex中的actions

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

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

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

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

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

相关 Vue中的Vuex

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

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