Vuex提升学习篇


Posted in Javascript onJanuary 11, 2018

本文介绍了Vuex 提升学习教程。如果本篇有看不明白的地方,请移步上一篇:Vuex 入门

上一篇我们讲了如何通过一些简单的动作来改变 store.js 中的数据对象,在实际工作中,这是完全无法满足工作需求的,所以这篇我们来说说如何做一些简单的流程判断。

Vuex提升学习篇

自制vuex LOGO

一、比如说我现在有这么个需求,当 count < 5 的时候,就停止 count-- 。这就需要用到 actions

actions 定义要执行的动作,如流程的判断、异步请求

在 store.js 内的 actions 中

// 定义 actions ,要执行的动作,如流程的判断、异步请求
const actions ={
  increment({commit,state}){
    commit('increment') 
  },
  decrement({ commit, state }) {
    // **通过动作改变的数据,在此处来做判断是否提交**
    if (state.count > 5) {
      commit('decrement')
    }
  }
}

运行项目

Vuex提升学习篇

二、通过 actions 模拟异步请求

1. 先在 App.vue 中定义好事件

<template>
 <div id="app">
  <button @click="increment">增加</button>
  <button @click="decrement">减少</button>
  //异步请求事件
  <button @click="incrementAsync">异步增加</button>
  <h1>{{count}}</h1>
 </div>
</template>

<script>
import {mapGetters,mapActions} from 'vuex'
export default {
 name: 'app',
 computed:mapGetters([
  'count'
 ]),
 methods:mapActions([
  'increment',
  'decrement',
  'incrementAsync'
 ])
}
</script>

2. 在 store.js 内的 actions 中添加 异步 Promise 事件

// 定义 actions ,要执行的动作,如流程的判断、异步请求
const actions ={
  increment({commit,state}){
    commit('increment') 
  },
  decrement({ commit, state }) {
    // **通过动作改变的数据,在此处来做判断是否提交**
    if (state.count > 5) {
      commit('decrement')
    }
  },
  incrementAsync({commit,state}){
    // 模拟异步操作
    var a = new Promise((resolve,reject) => {
      setTimeout(() => {
        resolve();
      }, 3000);
    })
    // 3 秒之后提交一次 increment ,也就是执行一次 increment 
    a.then(() => {
      commit('increment')
    }).catch(() => {
      console.log('异步操作失败');
    })
  }
}

运行项目

Vuex提升学习篇

三、获取数据状态

假如我们需要知道数据的奇偶数,那么就需要在 getters 中来判断。

getters 中可以获取经过处理后的数据,从而来判断状态

在 store.js 的 getters 中加入判断奇偶数的方法

var getters={
  count(state){
    return state.count
  },
  EvenOrOdd(state){
    return state.count%2==0 ? '偶数' : '奇数'
  }
}

在 App.vue 中加入

<template>
 <div id="app">
  <button @click="increment">增加</button>
  <button @click="decrement">减少</button>
  <button @click="incrementAsync">异步增加</button>
  <h1>{{count}}</h1>
  <!-- 判断奇偶数的方法 这种写法它会自动调用 EvenOrOdd 方法中的返回值,拿到的是个属性 -->
  <h1>{{EvenOrOdd}}</h1>
 </div>
</template>

<script>
import {mapGetters,mapActions} from 'vuex'
export default {
 name: 'app',
 computed:mapGetters([
  // 判断奇偶数的方法
  'EvenOrOdd',
  'count'
 ]),
 methods:mapActions([
  'increment',
  'decrement',
  'incrementAsync'
 ])
}
</script>

Vuex提升学习篇

判断奇偶数.gif

如有不明白之处,还请留言交流,或者直接翻看 API

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery下的Live方法和$.browser方法使用代码
Jun 02 Javascript
JS函数验证总结(方便js客户端输入验证)
Oct 29 Javascript
基于jquery的一个拖拽到指定区域内的效果
Sep 21 Javascript
AngularJS包括详解及示例代码
Aug 17 Javascript
AngularJS实现根据变量改变动态加载模板的方法
Nov 04 Javascript
Angular客户端请求Rest服务跨域问题的解决方法
Sep 19 Javascript
在Vue中使用Compass的方法
Mar 02 Javascript
详解微信小程序缓存--缓存时效性
May 02 Javascript
jquery.tagsinput.js实现记录checkbox勾选的顺序
Sep 21 jQuery
JS写滑稽笑脸运动效果
May 28 Javascript
js 将多个对象合并成一个对象 assign方法的实现
Sep 24 Javascript
vue3中轻松实现switch功能组件的全过程
Jan 07 Vue.js
浅谈Node.js爬虫之网页请求模块
Jan 11 #Javascript
VueAwesomeSwiper在VUE中的使用以及遇到的一些问题
Jan 11 #Javascript
angular2中Http请求原理与用法详解
Jan 11 #Javascript
基于node下的http小爬虫的示例代码
Jan 11 #Javascript
JS脚本实现网页自动秒杀点击
Jan 11 #Javascript
Javascript网页抢红包外挂实现分享
Jan 11 #Javascript
JS写谷歌浏览器chrome的外挂实例
Jan 11 #Javascript
You might like
PHP中Header使用的HTTP协议及常用方法小结
2014/11/04 PHP
PHP实现微信小程序人脸识别刷脸登录功能
2018/05/24 PHP
使用jQuery实现的掷色子游戏动画效果
2014/03/14 Javascript
JavaScript实现添加及删除事件的方法小结
2015/08/04 Javascript
javascript自定义滚动条实现代码
2020/04/20 Javascript
浅析函数声明和函数表达式——函数声明的声明提前
2016/05/03 Javascript
js基础之DOM中元素对象的属性方法详解
2016/10/28 Javascript
AngularJS动态绑定HTML的方法分析
2016/11/07 Javascript
vue自定义tap指令及tap事件的实现
2018/09/18 Javascript
JavaScript的查询机制LHS和RHS解析
2019/08/16 Javascript
vuex actions异步修改状态的实例详解
2019/11/06 Javascript
vue的三种图片引入方式代码实例
2019/11/19 Javascript
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作
2020/07/22 Javascript
[01:22]DOTA2神秘商店携大量周边降临完美大师赛
2017/11/07 DOTA
[45:18]2018DOTA2亚洲邀请赛 4.3 突围赛 Optic vs iG 第一场
2018/04/04 DOTA
python+mysql实现简单的web程序
2014/09/11 Python
python动态网页批量爬取
2016/02/14 Python
pandas 获取季度,月度,年度首尾日期的方法
2018/04/11 Python
python实现电子产品商店
2019/02/26 Python
Python CVXOPT模块安装及使用解析
2019/08/01 Python
Python 调用 Outlook 发送邮件过程解析
2019/08/08 Python
Python实现井字棋小游戏
2020/03/09 Python
Django 再谈一谈json序列化
2020/03/16 Python
PyInstaller的安装和使用的详细步骤
2020/06/02 Python
python爬虫把url链接编码成gbk2312格式过程解析
2020/06/08 Python
伊芙丽官方旗舰店:中国淑女一线品牌
2017/12/01 全球购物
别名指示符是什么
2012/10/08 面试题
《翻越远方的大山》教学反思
2014/04/13 职场文书
计算机专业自荐信
2014/05/24 职场文书
小学教师师德师风演讲稿
2014/08/22 职场文书
民主评议党员总结
2014/10/20 职场文书
出国签证在职证明范本
2014/11/24 职场文书
客户付款通知书
2015/04/23 职场文书
学习弘扬焦裕禄精神心得体会
2016/01/23 职场文书
应届毕业生的自我评价
2019/06/21 职场文书
CSS实现漂亮的时钟动画效果的实例代码
2021/03/30 HTML / CSS