浅谈vuex actions和mutation的异曲同工


Posted in Javascript onDecember 13, 2018

vuex说明:

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

包含的内容:

  • state:驱动应用的数据源;
  • view:以生命方式将state映射到视图;
  • actions:响应在view上的用户输入导致的状态变化;

流程示意图

浅谈vuex actions和mutation的异曲同工

但是,当我们的应用遇到多个组件共享状态时,单向数据流的简洁性很容易被破坏:

多个视图依赖于同一状态。

来自不同视图的行为需要变更同一状态。

对于问题一,传参的方法对于多层嵌套的组件将会非常繁琐,并且对于兄弟组件间的状态传递无能为力。

对于问题二,我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱,通常会导致无法维护的代码。

因此,我们为什么不把组件的共享状态抽取出来,以一个全局单例模式管理呢?在这种模式下,我们的组件树构成了一个巨大的“视图”,不管在树的哪个位置,任何组件都能获取状态或者触发行为!

另外,通过定义和隔离状态管理中的各种概念并强制遵守一定的规则,我们的代码将会变得更结构化且易维护。

浅谈vuex actions和mutation的异曲同工

适用于型单页应用

安装vuex

npm i vuex

新建文件夹store,建议目录

浅谈vuex actions和mutation的异曲同工

Actions 和 mutation

mutation:(必须是同步函数)

更改store中state值的唯一方法就是提交mutation,每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数:

mutations: {
  addNum(state) { 
   state.num ++
  }
}

你可以向 store.commit 传入额外的参数,即 mutation 的 载荷(payload):在大多数情况下,载荷应该是一个对象,这样可以包含多个字段并且记录的 mutation 会更易读:

mutations: {
  addNum(state,Payload) { 
   state.num +=Payload.amount
  }
}

不能直接调用一个 mutation handler。这个选项更像是事件注册:“当触发一个类型为 increment 的 mutation 时,调用此函数。”要唤醒一个 mutation handler,你需要以相应的 type 调用 store.commit 方法:

//页面中的操作(一、不带参数)
 methods:{
  add(){
   this.$store.commit('addNum')
  }
 }
//二、带参数的情况下
data(){
argument:{
 amount:10
},
methods:{
  add(){
   this.$store.commit('addNum',this.arguments)
  }
 }

actions

Action 类似于 mutation,不同在于:

  • Action 提交的是 mutation,而不是直接变更状态。
  • Action 可以包含任意异步操作。
mutations: {
  addNum(state,amount) {
   state.num +=amount
  },
  someMutation(state) {
   setTimeout(()=>{
     state.count--
   },1000)
  }
 },
 actions: {
  increment (context,args) {
      context.commit('addNum',args)
  }
 },
//另一种写法
 actions: {
  increment ({commit},args) {
      commit('addNum',args)
  }
 }

Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象,因此你可以调用 context.commit 提交一个 mutation,或者通过 context.state 和 context.getters 来获取 state 和 getters

分发Action

//页面中
methods:{
  add(){
   this.$store.dispatch('increment',this.pa.amount)
  }
 },

区别:

action和mutation都可以改变state中数据的状态,但是action可以处理异步函数可以在devtool中追踪数据变化,而mutation只可以处理同步函数,当处理异步函数的时候检测不到数据变化;

mutation 处理同步异步

mutations: {
//同步
  addNum(state,amount) {
   state.num +=amount
  },
//异步
  someMutation(state) {
   setTimeout(()=>{
     state.count--
   },1000)
  }
 }

页面中操作

<template>
<div>
   <p @click="add">同步{{num}}</p>
  <p @click="reduce">异步{{count}}</p>
</div>
</template>
 methods:{
  //同步
  add(){
   this.$store.commit('increment',this.pa.amount)
  },
//异步
  reduce(){
   this.$store.commit('someMutation')
  }
 }

数据变化之前,浏览器中显示,devtool中的数据状态

浅谈vuex actions和mutation的异曲同工

浅谈vuex actions和mutation的异曲同工

当页面中的数据改变之后,追踪数据

浅谈vuex actions和mutation的异曲同工

浅谈vuex actions和mutation的异曲同工

action 处理同步异步

mutations: {
  addNum(state, amount) {
   state.num += amount
  },
  someMutation(state) {
    state.count-- 
  }
 },
 actions: {
  increment({commit}, args) {
   commit('addNum', args)
  },
  actionSomemution(context) {
   setTimeout(() => {
     context.commit('someMutation') 
   }, 1000)
  }
 }

页面中

methods:{
  add(){
   this.$store.dispatch('increment',this.pa.amount)
  },
  reduce(){
   this.$store.dispatch('actionSomemution')
  }
 },

数据变化之前,浏览器中显示,与devtool中数据显示

浅谈vuex actions和mutation的异曲同工

浅谈vuex actions和mutation的异曲同工

操作之后数据变化,

浅谈vuex actions和mutation的异曲同工

浅谈vuex actions和mutation的异曲同工
----

小结:mutation只能处理同步函数,在devtools检测不到状态树中数据的变化,而actions可以处理同异步数据,可以在devtools检测数据变化,这样就好理解了

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

Javascript 相关文章推荐
非常好的js代码
Jun 27 Javascript
JQuery 确定css方框模型(盒模型Box Model)
Jan 22 Javascript
jQuery动态设置form表单的enctype值(实现代码)
Jul 04 Javascript
网页下载文件期间如何防止用户对网页进行其他操作
Jun 27 Javascript
js由下向上不断上升冒气泡效果实例
May 07 Javascript
基于OL2实现百度地图ABCD marker的效果
Oct 01 Javascript
详解JavaScript基本类型和引用类型
Dec 09 Javascript
详解JavaScript对象序列化
Jan 19 Javascript
js省市县三级联动效果实例
Apr 15 Javascript
vue toggle做一个点击切换class(实例讲解)
Mar 13 Javascript
JS数组方法slice()用法实例分析
Jan 18 Javascript
解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)
Jul 21 Javascript
webpack3里使用uglifyjs压缩js时打包报错的解决
Dec 13 #Javascript
javascript对HTML字符转义与反转义
Dec 13 #Javascript
Web安全之XSS攻击与防御小结
Dec 13 #Javascript
JavaScript实现邮箱后缀提示功能的示例代码
Dec 13 #Javascript
深入理解js A*寻路算法原理与具体实现过程
Dec 13 #Javascript
Vue.js上传图片到阿里云OSS存储的方法示例
Dec 13 #Javascript
JS/HTML5游戏常用算法之路径搜索算法 随机迷宫算法详解【普里姆算法】
Dec 13 #Javascript
You might like
解析关于java,php以及html的所有文件编码与乱码的处理方法汇总
2013/06/24 PHP
PHP改进计算字符串相似度的函数similar_text()、levenshtein()
2014/10/27 PHP
深入理解PHP之OpCode原理详解
2016/06/01 PHP
PDO::prepare讲解
2019/01/29 PHP
PHP正则验证字符串是否为数字的两种方法并附常用正则
2019/02/27 PHP
jQuery 处理表单元素的代码
2010/02/15 Javascript
2010年最佳jQuery插件整理
2010/12/06 Javascript
javascript屏蔽右键代码
2014/05/15 Javascript
json中换行符的处理方法示例介绍
2014/06/10 Javascript
Javascript学习笔记之 函数篇(一) : 函数声明和函数表达式
2014/06/24 Javascript
Egret引擎开发指南之运行项目
2014/09/03 Javascript
使用jquery组件qrcode生成二维码及应用指南
2015/02/22 Javascript
js中数组的常用方法小结
2016/12/30 Javascript
JavaScript实现鼠标点击导航栏变色特效
2017/02/08 Javascript
JavaScript评论点赞功能的实现方法
2017/03/13 Javascript
微信小程序实现点击返回顶层的方法
2017/07/12 Javascript
vue组件 $children,$refs,$parent的使用详解
2017/07/31 Javascript
详解JS中的this、apply、call、bind(经典面试题)
2017/09/19 Javascript
JavaScript实现点击出现图片并统计点击次数功能示例
2018/07/23 Javascript
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
2018/08/09 jQuery
vue与原生app的对接交互的方法(混合开发)
2018/11/28 Javascript
Vue列表循环从指定下标开始的多种解决方案
2020/04/08 Javascript
如何在postman中添加cookie信息步骤解析
2020/06/30 Javascript
用python登录Dr.com思路以及代码分享
2014/06/25 Python
Python 处理图片像素点的实例
2019/01/08 Python
Python3 max()函数基础用法
2019/02/19 Python
pytorch 求网络模型参数实例
2019/12/30 Python
Django框架实现在线考试系统的示例代码
2020/11/30 Python
使用HTML5捕捉音频与视频信息概述及实例
2018/08/22 HTML / CSS
俄罗斯三星品牌商店:Samsungstore
2020/04/05 全球购物
中文系师范生自荐信
2013/10/01 职场文书
普通员工辞职信
2014/01/17 职场文书
消防安全管理制度
2014/02/01 职场文书
捐助倡议书
2015/01/19 职场文书
世界卫生日宣传活动总结
2015/02/09 职场文书
2015年幼儿园中班开学寄语
2015/05/27 职场文书