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的用法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
在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
-
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中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
-
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应用的时候,很多时候需要记录一些变量的内容,这些可以用来做界面状态的承载,也可以作为页面间交换数据的处理,处理这些内容可以归为Vuex的状态控制.例如我们往往前端需要访问后端数据,一般是通过封装的Web API调用获取数据,而使用Store模式来处理相关的数据或者状态的变化,而视图View主要就是界面的展示处理.本篇随笔主要介绍如何整合这三者之间的关系,实现数据的获取.处理.展示等逻辑操作. Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管
-
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'
随机推荐
- IE 浏览器安全级别详情及区别小结
- 详解java配置文件的路径问题
- 深入Resource实现多语言支持的应用详解
- PHP文件上传实例详解!!!
- 可以在线执行PHP代码包装修正版
- MySQL日志系统详细资料分享
- Jquery根据浏览器窗口改变调整大小的方法
- 微信JSAPI Ticket接口签名详解
- 浅析Android手机卫士读取联系人
- 初次使用Docker的体验笔记总结
- 使用钩子如何锁定键盘的方法分享
- Java Map 在put值时value值不被覆盖的解决办法
- java使用数组和链表实现队列示例
- Python字典,函数,全局变量代码解析
- Oracle常见问题解决方案汇总
- ubuntu16.04搭建nfs服务的方法
- 编写多线程Python服务器 最适合基础
- python中selenium操作下拉滚动条的几种方法汇总
- Java自动添加重写的toString方法详解
- java实现一次性压缩多个文件到zip中的方法示例