浅谈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 相关文章推荐
jQuery学习笔记之Helloworld
Dec 22 Javascript
Js四则运算函数代码
Jul 21 Javascript
JavaScript实现找质数代码分享
Mar 24 Javascript
如何解决谷歌浏览器下jquery无法获取图片的尺寸
Sep 10 Javascript
js实现的光标位置工具函数示例
Oct 03 Javascript
Bootstrap基本布局实现方法详解
Nov 25 Javascript
详解vue渲染从后台获取的json数据
Jul 06 Javascript
Vue proxyTable配置多个接口地址,解决跨域的问题
Sep 11 Javascript
vue项目实现多语言切换的思路
Sep 17 Javascript
如何编写一个 Webpack Loader的实现
Oct 18 Javascript
jQuery实现回到顶部效果
Oct 19 jQuery
js 执行上下文和作用域的相关总结
Feb 08 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
php 分页原理详解
2009/08/21 PHP
Yii2.0中使用js异步删除示例
2017/03/10 PHP
php及codeigniter使用session-cookie的方法(详解)
2017/04/06 PHP
php实现简单四则运算器
2020/11/29 PHP
JavaScript中函数声明优先于变量声明的实例分析
2012/03/01 Javascript
一个通过script自定义属性传递配置参数的方法
2014/09/15 Javascript
基于jquery实现轮播特效
2016/04/22 Javascript
jquery实现转盘抽奖功能
2017/01/06 Javascript
微信小程序表单验证错误提示效果
2017/05/19 Javascript
浅谈express 中间件机制及实现原理
2017/08/31 Javascript
Vue.js轮播图走马灯代码实例(全)
2019/05/08 Javascript
JS造成内存泄漏的几种情况实例分析
2020/03/02 Javascript
JS求解两数之和算法详解
2020/04/28 Javascript
Vue父子之间值传递的实例教程
2020/07/02 Javascript
如何编写一个 Webpack Loader的实现
2020/10/18 Javascript
Ubuntu安装Jupyter Notebook教程
2017/10/18 Python
Python使用matplotlib的pie函数绘制饼状图功能示例
2018/01/08 Python
Flask框架各种常见装饰器示例
2018/07/17 Python
通过python爬虫赚钱的方法
2019/01/29 Python
举例讲解Python常用模块
2019/03/08 Python
Python实现 版本号对比功能的实例代码
2019/04/18 Python
Python实现自动访问网页的例子
2020/02/21 Python
python 装饰器的实际作用有哪些
2020/09/07 Python
css图标制作教程制作云图标
2014/01/19 HTML / CSS
仿CSDN Blog返回页面顶部功能实现原理及代码
2013/06/30 HTML / CSS
C#面试题问题集
2016/04/02 面试题
应届护士推荐信
2013/11/16 职场文书
大学生个人简历中的自我评价
2013/12/27 职场文书
国培教师自我鉴定
2014/02/12 职场文书
领导班子奢靡之风查摆问题及整改措施
2014/09/27 职场文书
离婚财产处理协议书
2014/09/30 职场文书
2015年元旦促销方案书
2014/12/09 职场文书
教师个人学习总结
2015/02/11 职场文书
2015年青年志愿者协会工作总结
2015/04/27 职场文书
物业保安辞职信
2015/05/12 职场文书
Nginx+SpringBoot实现负载均衡的示例
2021/03/31 Servers