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 AJAX实现目录浏览与编辑的代码
Oct 21 Javascript
用JavaScript隐藏控件的方法
Sep 21 Javascript
JS运行耗时操作的延时显示方法
Nov 19 Javascript
Jquery实现控件的隐藏和显示实例
Feb 08 Javascript
jQuery实现滚动条滚动到子元素位置(方便定位)
Jan 08 Javascript
Vue2.x中的Render函数详解
May 30 Javascript
jQuery实现简单的手风琴效果
Apr 17 jQuery
jquery根据name取得select选中的值实例(超简单)
Jan 25 jQuery
vue多次循环操作示例
Feb 08 Javascript
2019最新21个MySQL高频面试题介绍
Feb 06 Javascript
jquery实现进度条状态展示
Mar 26 jQuery
JS实现图片幻灯片效果代码实例
May 21 Javascript
浅谈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
PHP5.0正式发布 不完全兼容PHP4 新增多项功能
2006/10/09 PHP
让PHP COOKIE立即生效,不用刷新就可以使用
2011/03/09 PHP
php中使用GD库做验证码
2016/03/31 PHP
PHP如何根据文件头检测文件类型实例代码
2018/10/14 PHP
YII2框架中使用RBAC对模块,控制器,方法的权限控制及规则的使用示例
2020/03/18 PHP
PHP中的输出echo、print、printf、sprintf、print_r和var_dump的示例代码
2020/12/01 PHP
javaScript parseInt字符转化为数字函数使用小结
2009/11/05 Javascript
Jquery 插件学习实例1 插件制作说明与tableUI优化
2010/04/02 Javascript
JQuery的ready函数与JS的onload的区别详解
2013/11/21 Javascript
JS实现网页标题随机显示名人名言的方法
2015/11/03 Javascript
基于vue+canvas的excel-like组件实例详解
2017/11/28 Javascript
细说webpack源码之compile流程-入口函数run
2017/12/26 Javascript
vue spa应用中的路由缓存问题与解决方案
2019/05/31 Javascript
layui数据表格跨行自动合并的例子
2019/09/02 Javascript
JavaScript Reflect Metadata实现详解
2019/12/12 Javascript
vue 数据操作相关总结
2020/12/17 Vue.js
[29:16]完美世界DOTA2联赛决赛日 Inki vs LBZS 第三场 11.08
2020/11/10 DOTA
windows下wxPython开发环境安装与配置方法
2014/06/28 Python
Python实现遍历数据库并获取key的值
2015/05/17 Python
实例解析Python的Twisted框架中Deferred对象的用法
2016/05/25 Python
实例讲解python中的协程
2018/10/08 Python
Python实现的爬取百度贴吧图片功能完整示例
2019/05/10 Python
python之当你发现QTimer不能用时的解决方法
2019/06/21 Python
基于Python和PyYAML读取yaml配置文件数据
2020/01/13 Python
解决python -m pip install --upgrade pip 升级不成功问题
2020/03/05 Python
解决pyinstaller 打包exe文件太大,用pipenv 缩小exe的问题
2020/07/13 Python
基于logstash实现日志文件同步elasticsearch
2020/08/06 Python
python日志通过不同的等级打印不同的颜色(示例代码)
2021/01/13 Python
网络书店创业计划书
2014/02/07 职场文书
意外伤害赔偿协议书
2014/09/16 职场文书
停车位租赁协议书
2014/09/24 职场文书
2014年个人业务工作总结
2014/11/17 职场文书
2015年乡镇妇联工作总结
2015/05/19 职场文书
《陶罐和铁罐》教学反思
2016/03/03 职场文书
SQL Server作业失败:无法确定所有者是否有服务器访问权限的解决方法
2021/06/30 SQL Server
MySQL日期时间函数知识汇总
2022/03/17 MySQL