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：含有异步操作，数据提交至 actions ，可用于向后台提交数据

写法示例：

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

commit：同步操作，数据提交至 mutations ，可用于登录成功后读取用户信息写到缓存里

写法示例：

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

两者都可以以载荷形式或者对象风格的方式进行提交

补充知识：如何获取vuex的action的返回值（axios请求为例）

因为之前老师有讲过将vuex的封装。

今天就想尝试写一下，然后就封装了。

但是我想要在vue组件里面获取vuex的action的返回值

这里我用的dispatch调用 如图

我这里使用的new Promise的方法

调用getlunbolist的时候返回一个new Promise，把需要的值用resolve带出

在组件就可以用then的方法取出来使用

我只是一个小小白，我知道我的表述很生硬而且可能还不准备，但是意思就是大概这个意思。而且会坚持把我觉得有收获的内容下来的，希望以后成大佬了能自己来完善，当然大佬们看到问题了可以多多指点一下小弟。

以上这篇vuex中store存储store.commit和store.dispatch的用法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 对vuex中store和$store的区别说明

    这里写自定义目录标题 <router-link to="/login">{{ $store.state.userName }}</router-link> <router-link to="/login">{{ store.state.userName }}</router-link> <router-link to="/login">{{ this.store.state.userNa

  • vue实现将数据存入vuex中以及从vuex中取出数据

    1.在store文件下面新建文件 print.js ,写入以下代码 /** * 存放 ** 数据 * **/ // initial state const state = { all: { ID:'', BrandID:'' } } // getters const getters = {} // actions const actions = {} // mutations const mutations = { setPrint(state, all) { //设置参数 state.all

  • 在Vuex使用dispatch和commit来调用mutations的区别详解

    main.js中 import Vuex from 'vuex' Vue.use(vuex); const store = new Vuex.store({ state: { nickName: "", cartCount: 0 }, mutations: { updateUserInfo(state,nickName) { state.nickName = nickName; }, updateCartCount(state,cartCount) { state.cartCount

  • vuex中的state属性解析

    vuex中的state属性解析

    目录 state属性介绍 state的使用 扩展 vuex的State 单一状态树 在Vue组件中获得 Vuex 状态 mapState辅助函数 state属性介绍 state属性是Vuex中用于存放组件之间共享的数据:也就是说,我们把一些组件之间共享的状态主要存放在state属性中:它采用的是单一状态树——用一个对象就包含了全部的应用层级状态.这也意味着,每个应用将仅仅包含一个 store 实例.单一状态树让我们能够直接地定位任一特定的状态片段,在调试的过程中也能轻易地取得整个当前应用状态的快

  • 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中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

  • 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.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

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

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

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

  • vuex中store的action和mutations用法

    vuex中store的action和mutations用法

    目录 action和mutations (this.$store.dispatch和this.$store.commit)区别 用法 dispatch: 含有异步操作 commit:同步操作 实例 action和mutation分别用来处理什么? action和mutations (this.$store.dispatch和this.$store.commit)区别 都是调用vuex中的方法.一个异步一个同步 dispatch:含有异步操作,例如向后台提交数据,写法: this.$store.d

  • 详解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'

随机推荐