浅谈vuex 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检测数据变化，这样就好理解了
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了axios全局路由拦截的设置方法,axios全局路由代码通常是在构建axios实例注入的，本文通过实例代码介绍的非常详细，需要的朋友可以参考下2023-09-09
vue的主要思想是组件化开发,路由用来配置组件对应展示路径,本文给大家介绍vue中路由router配置步骤,创建路由文件——使用路由——配置路由出口,使路由配置内容展示在页面上,感兴趣的朋友跟随小编一起看看吧2023-12-12
Vue CLI是一个用于快速Vue.js开发的完整系统。这篇文章主要介绍了Vue Cli3 创建项目的方法步骤，非常具有实用价值，需要的朋友可以参考下2018-10-10
element el-tree组件的动态加载、新增、更新节点的实现
这篇文章主要介绍了element el-tree组件的动态加载、新增、更新节点的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-02-02
这篇文章主要介绍了Vue Router 实现登录后跳转到之前相要访问的页面,本文仅演示路由跳转和导航守卫相关代码的实现，不包含具体的权限验证和登录请求，需要的朋友可以参考下2022-12-12
这篇文章主要介绍了Vue Prop属性功能与用法,结合实例形式较为详细的分析了vue.js中Prop属性的功能、原理、使用方法及相关操作注意事项,需要的朋友可以参考下2019-02-02
Vue的watch选项提供了多种方法来观测数据属性的变化,让我们能够编写更加优雅和维护性更高的代码,本文给大家介绍Vue中watch的多种使用方法小结,感兴趣的朋友一起看看吧2023-10-10
本篇文章主要介绍了Django+Vue.js搭建前后端分离项目的示例，具有一定参考价值，有兴趣的可以了解一下2017-08-08
这篇文章主要介绍了vue在history模式下打包部署问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-03-03
这篇文章主要为大家介绍了axios模块化封装实例化及vue本地解决跨域示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
最新评论