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 相关文章推荐
Js 刷新框架页的代码
Apr 13 Javascript
formvalidator验证插件中有关ajax验证问题
Jan 04 Javascript
jQuery插件实现屏蔽单个元素使用户无法点击
Apr 12 Javascript
table行随鼠标移动变色示例
May 07 Javascript
JavaScript Array对象详解
Mar 01 Javascript
JS封装的选项卡TAB切换效果示例
Sep 20 Javascript
微信小程序 视图层(xx.xml)和逻辑层(xx.js)详细介绍
Oct 13 Javascript
详解基于vue-cli3.0如何构建功能完善的前端架子
Oct 09 Javascript
使用VUE+iView+.Net Core上传图片的方法示例
Jan 04 Javascript
如何使用VuePress搭建一个类型element ui文档
Feb 14 Javascript
Vue 无限滚动加载指令实现方法
May 28 Javascript
bootstrap table实现横向合并与纵向合并
Jul 18 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
计数器详细设计
2006/10/09 PHP
BBS(php &amp; mysql)完整版(八)
2006/10/09 PHP
php学习笔记之基础知识
2014/11/08 PHP
详解WordPress中创建和添加过滤器的相关PHP函数
2015/12/29 PHP
ThinkPHP实现登录退出功能
2017/06/29 PHP
PHP filesize函数用法浅析
2019/02/15 PHP
img的onload的另类用法
2008/01/10 Javascript
jquery 提交值不为空的元素示例代码
2013/05/10 Javascript
js 自定义个性下拉选择框示例
2013/08/20 Javascript
js事件绑定快捷键以ctrl+k为例
2014/09/30 Javascript
解决jquery插件:TypeError:$.browser is undefined报错的方法
2015/11/21 Javascript
AngularJS基础 ng-click 指令示例代码
2016/08/01 Javascript
js实现select选择框效果及美化
2016/08/19 Javascript
Bootstrap模态框案例解析
2017/03/05 Javascript
socket.io实现在线群聊功能
2017/04/07 Javascript
详解AngularJs ui-router 路由的简单介绍
2017/04/26 Javascript
纯js实现页面返回顶部的动画(超简单)
2017/08/10 Javascript
vue打包后显示空白正确处理方法
2017/11/01 Javascript
nodejs爬虫初试superagent和cheerio
2018/03/05 NodeJs
vue项目国际化vue-i18n的安装使用教程
2018/03/14 Javascript
京东优选小程序的实现代码示例
2020/02/25 Javascript
[01:18]一目了然!DOTA2DotA快捷操作对比第一弹
2014/07/01 DOTA
python使用内存zipfile对象在内存中打包文件示例
2014/04/30 Python
python实现批量监控网站
2016/09/09 Python
python自动裁剪图像代码分享
2017/11/25 Python
python爬虫爬取快手视频多线程下载功能
2018/02/28 Python
python2和python3的输入和输出区别介绍
2018/11/20 Python
Laravel+Dingo/Api 自定义响应的实现
2019/02/17 Python
讲解Python3中NumPy数组寻找特定元素下标的两种方法
2019/08/04 Python
python重要函数eval多种用法解析
2020/01/14 Python
乌克兰香水和化妆品网站:Notino.ua
2018/03/26 全球购物
Python如何定义一个函数
2015/09/01 面试题
质量管理标语
2014/06/12 职场文书
大专毕业生求职信
2014/07/05 职场文书
年度考核登记表个人总结
2015/03/06 职场文书
2015人事行政工作总结范文
2015/05/21 职场文书