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 相关文章推荐
通过Javascript创建一个选择文件的对话框代码
Jun 16 Javascript
JavaScript中this的使用详解
Nov 08 Javascript
ionic组件ion-tabs选项卡切换效果实例
Aug 27 Javascript
9个让JavaScript调试更简单的Console命令
Nov 14 Javascript
实例详解Node.js 函数
Jun 10 Javascript
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
Nov 08 Javascript
详解easyui 切换主题皮肤
Apr 04 Javascript
JavaScript剩余操作符Rest Operator详解
Jul 20 Javascript
JS实现普通轮播图特效
Jan 01 Javascript
JS如何定义用字符串拼接的变量
Jul 11 Javascript
Vue js with语句原理及用法解析
Sep 03 Javascript
vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作
Sep 10 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
PHP新手入门学习方法
2011/05/08 PHP
PHP单例模式模拟Java Bean实现方法示例
2018/12/07 PHP
javascript 二分法(数组array)
2010/04/24 Javascript
js动态调用css属性的小规律及实例说明
2013/12/28 Javascript
jQuery实现点击该行即可删除HTML表格行
2014/10/17 Javascript
jQuery实现跟随鼠标运动图层效果的方法
2015/02/02 Javascript
深入浅析jQuery对象$.html
2016/08/22 Javascript
JavaScript与java语言有什么不同
2016/09/22 Javascript
用Nodejs搭建服务器访问html、css、JS等静态资源文件
2017/04/28 NodeJs
详解vue-router2.0动态路由获取参数
2017/06/14 Javascript
vue-cli配置环境变量的方法
2018/07/09 Javascript
Vue 组件修改根实例的数据的方法
2019/04/02 Javascript
Vue开发Html5微信公众号的步骤
2019/04/11 Javascript
JavaScript实现单英文金山打字通
2020/07/24 Javascript
js实现3D旋转相册
2020/08/02 Javascript
两个命令把 Vim 打造成 Python IDE的方法
2016/03/20 Python
Python实现针对给定单链表删除指定节点的方法
2018/04/12 Python
Windows上使用Python增加或删除权限的方法
2018/04/24 Python
对Python subprocess.Popen子进程管道阻塞详解
2018/10/29 Python
Python合并同一个文件夹下所有PDF文件的方法
2019/03/11 Python
Python 中PyQt5 点击主窗口弹出另一个窗口的实现方法
2019/07/04 Python
基于Python的ModbusTCP客户端实现详解
2019/07/13 Python
Matplotlib使用字符串代替变量绘制散点图的方法
2020/02/17 Python
如何用Python徒手写线性回归
2021/01/25 Python
Lookfantastic法国官网:英国知名美妆购物网站
2017/10/28 全球购物
英国领先的互联网葡萄酒礼品商:Vintage Wine & Port
2019/05/24 全球购物
你常见到的runtime exception
2016/09/05 面试题
污水厂厂长岗位职责
2014/01/04 职场文书
检察机关个人对照检查材料
2014/09/15 职场文书
群众路线领导班子整改方案
2014/10/25 职场文书
2014年加油站站长工作总结
2014/12/23 职场文书
事业单位考察材料范文
2014/12/25 职场文书
入团介绍人意见范文
2015/06/04 职场文书
2016年小学生寒假家长评语
2015/10/10 职场文书
《工作是最好的修行》读后感3篇
2019/12/13 职场文书
SQLServer 错误: 15404,无法获取有关 Windows NT 组/用户 WIN-8IVSNAQS8T7\Administrator 的信息
2021/06/30 SQL Server