浅谈vuex actions和mutation的异曲同工

更新时间：2018年12月13日 14:27:10 作者：color_小浣熊

这篇文章主要介绍了浅谈vuex actions和mutation的异曲同工，详细的介绍了actions和mutation的使用和区别，非常具有实用价值，需要的朋友们下面随着小编来一起学习学习吧

vuex说明：

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

包含的内容：

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

流程示意图

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

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

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

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

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

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

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

适用于型单页应用

安装vuex

npm i vuex

新建文件夹store,建议目录

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中的数据状态

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

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中数据显示

操作之后数据变化，

----

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue+tp5实现简单登录功能
这篇文章主要为大家详细介绍了vue+tp5实现简单登录功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-11-11
Vant Weapp组件踩坑:picker的初始赋值解决
这篇文章主要介绍了Vant Weapp组件踩坑:picker的初始赋值解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11
Vue.js仿Select下拉框效果
这篇文章主要为大家详细介绍了Vue.js仿 Select下拉框效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-02-02
解决Vue打包之后文件路径出错的问题
下面小编就为大家分享一篇解决Vue打包之后文件路径出错的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-03-03
关于el-form中el-input输入框的宽度问题详解
自从用了element-ui,确实好用,该有的组件都有,下面这篇文章主要给大家介绍了关于el-form中el-input输入框的宽度问题的相关资料,需要的朋友可以参考下
2023-01-01
VUE的history模式下除了index外其他路由404报错解决办法
在本篇文章里小编给大家分享的是关于VUE的history模式下除了index外其他路由404报错解决办法，对此有需要的朋友们可以学习下。
2019-08-08
vue3中使用codemirror的详细教程
这篇文章主要给大家介绍了关于vue3中使用codemirror的详细教程,CodeMirror是一款功能强大的代码高亮插件,他不仅提供了高亮功能,其丰富的方法属性也封装了缩进、自动换行、获取编辑文本、设置编辑文本、回退功能等多种实用效果,需要的朋友可以参考下
2023-09-09
vue中如何去掉input前后的空格
这篇文章主要介绍了vue中如何去掉input前后的空格问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-03-03
vue中使用过滤器filters的this为undefined的问题
这篇文章主要介绍了vue中使用过滤器filters的this为undefined的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-01-01
了解VUE的render函数的使用
本篇文章主要介绍了了解VUE的render函数的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-06-06