vuex中store.commit和store.dispatch的区别及使用方法

目录
  • store.commit和store.dispatch的区别及使用
    • 规范的使用方式
    • 主要区别
  • this.$store.dispatch() 与 this.$store.commit()
  • 总结

store.commit和store.dispatch的区别及使用

代码示例:

this.$store.commit('loginStatus', 1);

this.$store.dispatch('isLogin', true);

规范的使用方式

// 以载荷形式
store.commit('increment',{
  amount: 10   //这是额外的参数
})

// 或者使用对象风格的提交方式
store.commit({
  type: 'increment',
  amount: 10   //这是额外的参数
})

主要区别

dispatch:含有异步操作,数据提交至 actions ,可用于向后台提交数据

this.$store.dispatch('isLogin', true);

commit:同步操作,数据提交至 mutations ,可用于读取用户信息写到缓存里

this.$store.commit('loginStatus', 1);

this.$store.dispatch() 与 this.$store.commit()

传值给vuex的mutation改变state

commit: 同步操作

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

dispatch: 异步操作

  • 存储
this.$store.dispatch('getlists',name)
  • 取值
this.$store.getters.getlists

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • vue3中router路由以及vuex的store使用解析

    目录 vue3 router路由及vuex store使用 1.路由 2.vuex vue3中router路由和vuex的store使用,获取对象基本使用 vue3中router和store使用方法 1.企业开发Router全局配置 2.企业开发Store全局配置 功能快捷键 vue3 router路由及vuex store使用 1.路由 <script> import { useRouter, useRoute } from 'vue-router' export default {   s

  • vue在.js文件中引入store和router问题

    目录 在.js文件中引入store和router 在js文件中使用vue的router和store 总结 在.js文件中引入store和router 在js文件中使用vue的router和store 在js文件中引入vue的路由配置文件 或者 store文件 import store from '../store'; import router from '../router'; //直接使用即可 router.push({'path': '/'}) store.state.XXX;  总结 以

  • vuex中this.$store.commit和this.$store.dispatch的基本用法实例

    目录 前言 区别 实战 总结 前言 this. s t o r e . d i s p a t c h ( ) 与 t h i s . store.dispatch() 与 this. store.dispatch()与this.store.commit()方法的区别总的来说他们只是存取方式的不同,两个方法都是传值给vuex的mutation改变state 区别 this.$store.commit() 同步操作 this.$store.commit('方法名',值)[存储] this.$sto

  • vuex中store存储store.commit和store.dispatch的用法

    代码示例: this.$store.commit('loginStatus', 1); this.$store.dispatch('isLogin', true); 规范的使用方式: // 以载荷形式 store.commit('increment',{ amount: 10 //这是额外的参数 }) // 或者使用对象风格的提交方式 store.commit({ type: 'increment', amount: 10 //这是额外的参数 }) 主要区别: dispatch:含有异步操作,数

  • vuex中store存储store.commit和store.dispatch的区别及说明

    目录 store存储store.commit和store.dispatch区别 主要区别 vuex store原理及使用指南 使用 安装 示例需求场景 源码目录结构 store组件初始化 store存储store.commit和store.dispatch区别 代码示例: this.$store.commit('loginStatus', 1); this.$store.dispatch('isLogin', true); 规范的使用方式: // 以载荷形式 store.commit('incr

  • vuex中store.commit和store.dispatch的区别及使用方法

    目录 store.commit和store.dispatch的区别及使用 规范的使用方式 主要区别 this.$store.dispatch() 与 this.$store.commit() 总结 store.commit和store.dispatch的区别及使用 代码示例: this.$store.commit('loginStatus', 1); this.$store.dispatch('isLogin', true); 规范的使用方式 // 以载荷形式 store.commit('inc

  • java 中String和StringBuffer与StringBuilder的区别及使用方法

    java 中String和StringBuffer与StringBuilder的区别及使用方法 1. String 类 String的值是不可变的,这就导致每次对String的操作都会生成新的String对象,不仅效率低下,而且大量浪费有限的内存空间. String a = "a"; //假设a指向地址0x0001 a = "b";//重新赋值后a指向地址0x0002,但0x0001地址中保存的"a"依旧存在,但已经不再是a所指向的,a 已经指向

  • 对python中for、if、while的区别与比较方法

    如下所示: if应用举例: #if 若条件成立,只执行一次 #if 条件:如果条件成立,执行条件后的代码块内容,不成立,直接跳过代码块 #判断如果年龄age小于18,输出未成年 #=一个等号表示赋值的意思 ==双等号判断等号两边的值是否相等 if age==18: print('未成年') #两种情况的判断 #如果age小于18 输出未成年,否则输出成年人 #如果条件成立,执行条件后的代码块内容,条件不成立,执行else后的代码块内容,有且只会执行其中某一个代码块 if age<18: prin

  • Vue中this.$router和this.$route的区别及push()方法

    官房文档里是这样说明的: 通过注入路由器,我们可以在任何组件内通过 this.$router 访问路由器,也可以通过 this.$route 访问当前路由 可以理解为: this.$router 相当于一个全局的路由器对象,包含了很多属性和对象(比如 history 对象),任何页面都可以调用其 push(), replace(), go() 等方法. this.$route 表示当前路由对象,每一个路由都会有一个 route 对象,是一个局部的对象,可以获取对应的 name, path, pa

  • Vuex中this.$store.commit()和this.$store.dispatch()区别说明

    目录 this.$store.commit()和this.$store.dispatch()的区别 commit: 同步操作 dispatch: 异步操作 其他了解 Vuex应用实例this.$store.commit()触发 新建文件夹store,store下 头部公共组件components文件夹下 this.$store.commit()和this.$store.dispatch()的区别 两个方法其实很相似,关键在于一个是同步,一个是异步 commit: 同步操作 this.$store

  • Vue Element前端应用开发之Vuex中的API Store View的使用

    概述 在我们开发Vue应用的时候,很多时候需要记录一些变量的内容,这些可以用来做界面状态的承载,也可以作为页面间交换数据的处理,处理这些内容可以归为Vuex的状态控制.例如我们往往前端需要访问后端数据,一般是通过封装的Web API调用获取数据,而使用Store模式来处理相关的数据或者状态的变化,而视图View主要就是界面的展示处理.本篇随笔主要介绍如何整合这三者之间的关系,实现数据的获取.处理.展示等逻辑操作. Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管

  • 详解vuex中的this.$store.dispatch方法

    vuex中的this.$store.dispatch方法 main.js new Vue({ el:'#app', router, store, render:h=>h(APP) }) store/index.js import Vue from 'vue' import Vuex from 'vuex' import app from './modules/app' import user from '.modules/user' import getters from '.getters'

随机推荐