vuex- action
 
1、当点发送过快,页面中渲染的内容与state中的数据不一致,vuex里面的state变得慢,且不持续更新
2、action中是可以做到页面中state中数据保持一致
责编:menVScode 2017-12-16 22:39 阅读(970)

如果点击按钮不是直接改变store中的状态,而是完成其他操作后再来改变,这时候会出现一个问题。

/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
let store = new Vuex.Store({
state:{ //应用中需要的状态数据
count:100
},
mutations:{//不能直接改变state中的状态,唯一途径显示的提交mutations
addNum(state,n){
setTimeout(()=>{ //模拟异步操作
state.count +=n
},1000)
},
minusNum(state,payload){
state.count -= payload.min
}
}
})
export default store

初始化状态

慢慢点击+按钮,观察页面中的数字和控制台中的数字。

快速点击+按钮,观察页面中的数字和控制台中的数字。

两个不同点击方式有一个共同的现象:页面中数字跟控制台数字没有统一。当点击一下+按钮就通过 mutation 改变状态,在vuex中有一个原则:在提交mutation的时候必须是同步的。

当一提交mutation,控制台Base State中必定有一条记录,不做异步操作。但是要包含异步操作的话,需要使用 action。

Action:包含异步操作、提交mutation改变状态。

修改后/store/index.js

在actions中通过 context.commit('addNum',{}) 来提交mutation

import Vue from 'vue'
import Vuex from 'vuex' Vue.use(Vuex) let store = new Vuex.Store({
state:{ //应用中需要的状态数据
count:100
},
mutations:{//不能直接改变state中的状态,唯一途径显示的提交mutations
addNum(state,payload){
state.count +=payload.n
},
minusNum(state,payload){
state.count -= payload.min
}
},
actions:{
addAction(context){//参数:对象,不是当前的store实例
setTimeout(()=>{ //模拟异步操作
//改变状态,必须提交mutation
context.commit('addNum',{n:3})
},1000)
}
}
}) export default store

修改后 /src/components/Increment.vue

通过 this.$store.dispatch('addAction') 来触发一个action

<template>
<div>
<h2>加减</h2>
<button @click="addHandle">+</button>
<span>{{num}}</span>
<button @click="minusHandle">-</button>
</div>
</template>
<script>
export default{
computed:{
num(){
return this.$store.state.count
}
},
methods:{
addHandle(){
//改变状态,只需提交mutation中的addNum
//this.$store.commit('addNum',3) //触发一个action
this.$store.dispatch('addAction')
},
minusHandle(){
this.$store.commit({
type:'minusNum',
min:5
})
}
}
}
</script>

与本文action相关的文章(必看):http://menvscode.com/detail/5a353b05a7833e528ca883de

  • 喜欢 (0)
  • 收藏 (0)
标签: action vuex
分享:0
前端交流群: 
原创声明: 本文属于原创文章,转载请注明出处--http://www.menvscode.com/detail/5a353031a7833e528ca883dd
 
登录
 
 
 
 
 
还没有评论,快来抢沙发吧!
 
 
 

畅言正式推出商业版包月/包年VIP服务,评论流弹窗位置全站去广告,一对一专业技术支持,一对一重点客户服务,现在就加入我们的VIP大家庭吧!

 
 
 
 
立刻说两句吧!
 
 

本站在建设中引用了因特网上的一些资源并对有明确来源的注明了出处,版权归原作者及网站所有;
如果您对本站文章版权的归属存有异议,请您联系站长:third_king$163.com(将$换成@),我们会马上做出整改。

Copyright © menvscode.com All Rights Reserved.   浙ICP备16010139号-3

mutation与vuex区别的更多相关文章

  1. vuex知识笔记,及与localStorage和sessionStorage的区别

    菜单快捷导航 Vuex是什么东东,有什么应用场景?localStorage和sessionStorage能否替代它? Vuex知识点State.Getter.Mutaion.Action Vuex模块 ...

  2. vuex 基本入门和使用(三)-关于 mutation

    vuex 基本入门和使用(三)-关于 mutation vuex 版本为^2.3.1,按照我自己的理解来整理vuex. 关于 mutation 这里应该很好理解. 更改 Vuex 的 store 中的 ...

  3. Vuex之Mutation

    [前言] 数据在页面是获取到了,但是如果需要修改count值怎么办?更改 Vuex 的 store 中的状态的唯一方法是提交 mutation.Vuex 中的 mutation 非常类似于事件:每个 ...

  4. [Vuex系列] - Mutation的具体用法

    更改 Vuex 的 store 中的状态的唯一方法是提交 mutation.Vuex 中的 mutation 非常类似于事件:每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 ...

  5. 挑战全网最幽默的Vuex系列教程:第三讲 Vuex旗下的Mutation

    写在前面 上一讲「Vuex 旗下的 State 和 Getter」,告诉了我们怎么去使用仓库 store 中的状态数据.当然,光会用肯定还不够,大部分的应用场景还得对这些状态进行操控,那么具体如何操控 ...

  6. 初识vuex

    1.简介 vuex是 vue官方推荐的一个状态管理器.当我们遇到很多状态改变时,组件之间的通信就会变得复杂,这时候vuex的强大就展现出来. 我们从vuex的原理以及vuex的api两个部分介绍vue ...

  7. Vue-认识状态管理vuex

    vuex是一个专门为vue.js设计的状态管理模式,并且也可以使用devtools进行调试,可以多个组件共享状态.简单来说,就是共享的状态用state来存放,用mutations来操作state,但是 ...

  8. vuex - 学习日记

    一.简单理解 简单说vuex,就是用来管理组件状态的数据,并且能在你可掌控的范围下增删改查这些数据. store容器 , state状态 二者关系(包含): 以前我也把vuex里边的state看成是一 ...

  9. day 87 Vue学习六之axios、vuex、脚手架中组件传值

      本节目录 一 axios的使用 二 vuex的使用 三 组件传值 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 axios的使用 Axios 是一个基于 promise 的 HT ...

随机推荐

  1. ACM-ICPC(11/9)

    今天看了一下黑书,感觉很刘汝佳,是他的风格,题目挺好的~~~ 枚举 P12翻硬币 二进制枚举每一列的情况2^9种. 在每一种情况下然后对于每一行就是翻与不翻的两种情况~~~ 贪心 P13钓鱼问题 PO ...

  2. 【洛谷P1801】黑匣子

    黑匣子 题目链接 看到题解中“维护两个堆”,突然想到了这道题的解法 维护两个堆:大根堆h1, 小根堆h2 大根堆里的是最小的i个值,小根堆里是剩下的值 每Add一个值时 插入到小根堆中, 再比较小根堆 ...

  3. 【luogu P3469 [POI2008]BLO-Blockade】 题解

    题目链接:https://www.luogu.org/problemnew/show/P3469 #include <cstdio> #include <cstring> #i ...

  4. 【luogu P3373 线段树2】 模板

    题目链接:https://www.luogu.org/problemnew/show/P3373 lazy标记两个,先乘后加 #include <iostream> #include &l ...

  5. ASP.NET MVC Cookie 身份验证

    1 创建一个ASP.NET MVC 项目 添加一个 AccountController 类. public class AccountController : Controller { [HttpGe ...

  6. C# ==、Equals、ReferenceEquals 区别与联系 (转载)

    相关概念 .Net提供了ReferenceEquals.静态Equals,具体类型的Equals以及==操作符这四个判等函数.但是这四个函数之间有细微的关系,改变其中一个函数的实现会影响到其他函数的操 ...

  7. 让IIS支持无后缀名访问

    IIS中添加对Mime类型 .   application/octet-stream

  8. AngularJS 控制器函数

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  9. Spring知识点总结(二)之Spring IOC

    1.创建bean类,并在spring中进行配置交由spring来管理1. IOC(DI) - 控制反转(依赖注入)    所谓的IOC称之为控制反转,简单来说就是将对象的创建的权利及对象的生命周期的管 ...

  10. oracle行长度大小和页行数修改

    行长度展示长度: /*查询长度*/ SQL> show linesize;   /*查询行长度大小*/linesize 100SQL> set linesize200;    /*修改行长 ...