浅谈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 相关文章推荐
通用javascript脚本函数库 方便开发
Oct 13 Javascript
js三种排序算法分享
Aug 16 Javascript
javascript+xml实现简单图片轮换(只支持IE)
Dec 23 Javascript
javascript 模拟坦克大战游戏(html5版)附源码下载
Apr 08 Javascript
一个不错的字符串转码解码函数(自写)
Jul 31 Javascript
原生javascript实现简单的datagrid数据表格
Jan 02 Javascript
第五章之BootStrap 栅格系统
Apr 25 Javascript
使用原生的javascript来实现轮播图
Feb 24 Javascript
jquery图片放大镜效果
Jun 23 jQuery
vscode中vue-cli项目es-lint的配置方法
Jul 30 Javascript
详解关于webpack多入口热加载很慢的原因
Apr 24 Javascript
基于javascript处理nginx请求过程详解
Jul 07 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
pw的一个放后门的方法分析
2007/10/08 PHP
PHP大批量数据操作时临时调整内存与执行时间的方法
2011/04/20 PHP
php DOS攻击实现代码(附如何防范)
2012/05/29 PHP
php笔记之:php函数range() round()和list()的使用说明
2013/04/26 PHP
服务器迁移php版本不同可能诱发的问题
2015/12/22 PHP
php使用环形链表解决约瑟夫问题完整示例
2018/08/07 PHP
PHP实现的杨辉三角求解算法分析
2019/03/11 PHP
javascript GUID生成器实现代码
2009/10/31 Javascript
JavaScript 错误处理与调试经验总结
2010/08/10 Javascript
Javascript中判断变量是数组还是对象(array还是object)
2013/08/14 Javascript
jquery中获取id值方法小结
2013/09/22 Javascript
jquery获取div距离窗口和父级dv的距离示例
2013/10/10 Javascript
全面兼容的javascript时间格式化函数(比较实用)
2014/05/14 Javascript
javascript实现带下拉子菜单的导航菜单效果
2015/05/14 Javascript
javascript中数组和字符串的方法对比
2016/07/20 Javascript
vue移动端裁剪图片结合插件Cropper的使用实例代码
2017/07/10 Javascript
web前端vue实现插值文本和输出原始html
2018/01/19 Javascript
JS严格模式知识点总结
2018/02/27 Javascript
JS的函数调用栈stack size的计算方法
2018/06/24 Javascript
详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决
2019/04/14 Javascript
如何提升vue.js中大型数据的性能
2019/06/21 Javascript
js实现适配移动端的拖动效果
2020/01/13 Javascript
OpenLayers3实现测量功能
2020/09/25 Javascript
JavaScript中arguments的使用方法详解
2020/12/20 Javascript
Python中使用SAX解析xml实例
2014/11/21 Python
python实现查找两个字符串中相同字符并输出的方法
2015/07/11 Python
python读取一个目录下所有txt里面的内容方法
2018/06/23 Python
Django自定义全局403、404、500错误页面的示例代码
2020/03/08 Python
Matplotlib自定义坐标轴刻度的实现示例
2020/06/18 Python
普通PHP程序员笔试题
2016/01/01 面试题
化学学院毕业生自荐信范文
2013/12/17 职场文书
酒店销售主管岗位职责
2014/01/04 职场文书
讲文明树新风公益广告宣传方案
2014/02/25 职场文书
2015年大班保育员工作总结
2015/05/18 职场文书
Python Numpy之linspace用法说明
2021/04/17 Python
Python办公自动化PPT批量转换操作
2021/09/15 Python