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检测数据变化,这样就好理解了
vuex相关(actions和mutation的异曲同工)的更多相关文章
- Do not mutate vuex store state outside mutation handlers.
组件代码: selectItem(item,index) { this.selectPlay({ list: this.songs, index }) }, ...mapActions([ 'sele ...
- vuex的state,mutation,getter,action
开始!正常的简单的拆分下是这样的文件当然module可以在store下面新建一个文件夹用来处理单独模块的vuex管理比较合适. 1.index.js下面 import Vue from 'vue' i ...
- vuex相关知识点
vuex简单理解转载博客 vuex从入门到入门------state:从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态------Getters:可以很容易地在任何组件中使用它- ...
- Vuex 的使用 State Mutation Getter Action
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex); /*1.state在vuex中用于存储数据*/ var state={ cou ...
- [Vuex系列] - Actions的理解之我见
Actions如何定义的 恕小端不才,对Action的总结如下: Action 可以提交mutation方法,通过mutation来改变state Action 函数可以接收一个context对象,通 ...
- vuex相关的知识
vue的核心是store,它可以看作是一个容器,它包含着应用中的状态state(state,mutations,actions,getters, modules).它中的存储是响应式的,当store中 ...
- vuex 之既生‘mutation’何生‘action’
vuex 中,action 及 mutation 均为操作数据的作用而存在,既然二者均可改变数据,为什么要分成两个方法来处理呢,因为: Mutation 必须是同步函数 mutations: { so ...
- mutation中修改state中的状态值,却报[vuex] do not mutate vuex store state outside mutation handlers.
网上百度说是在mutation外修改state中的状态值,会报下列错误,可我明明在mutations中修改的状态值,还是报错 接着百度,看到和我类似的问题,说mutations中只能用同步代码,异步用 ...
- VUEX报错 [vuex] Do not mutate vuex store state outside mutation handlers
数组 错误的写法:let listData= state.playList; // 数组深拷贝,VUEX就报错 正确的写法:let listDate= state.playList.slice(); ...
随机推荐
- Tomcat cluster and session
Cluster and session session consistency (1) session sticky source_ip: nginx: ip_hash haproxy: source ...
- 4 Java 如何判定是否存活或者死亡
在堆中存放着几乎所有的对象实例,垃圾收集器在对堆进行回收前,第一件事就是要确定这些对象之中哪些还活着,哪些对象已经死去. 判断对象是否已经死亡有以下几种算法: 引用计数法算法 定义 : 给对象中添加一 ...
- bzoj 1179: [Apio2009]Atm【tarjan+spfa】
明明优化了spfa还是好慢-- 因为只能取一次值,所以先tarjan缩点,把一个scc的点权和加起来作为新点的点权,然后建立新图.在新图上跑spfa最长路,最后把酒吧点的dis取个max就是答案. # ...
- bzoj 2618【半平面交模板】
#include<iostream> #include<cstdio> #include<algorithm> #include<cmath> usin ...
- [Swift通天遁地]一、超级工具-(3)带切换图标的密码文本框
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
- Ubuntu 18 开机后直接进入命令行界面,没法进入桌面
应该是之前不知道干啥,删了gnome的一个东西,导致没法正常进入 暴力解决,直接重装桌面环境 sudo apt install ubuntu-desktop
- java基本数据类型所占字节数
JAVA基本数据类型所占字节数是多少?(32位系统) byte 1字节 short 2字节 int 4字节 ...
- Lightoj 1054 - Efficient Pseudo Code
题目连接: http://www.lightoj.com/volume_showproblem.php?problem=1054 题目大意: 给出n,m,问n^m的所有因子之和是多少? 解题思路: 补 ...
- [C#基础知识系列]专题十:全面解析可空类型[转]
原文链接 主要内容: 1:空合并操作符(?? 操作符) ??操作符也就是"空合并操作符",它代表的意思是两个操作数,如果左边的数不为null时,就返回左边的数,如果左边的数为nul ...
- C# 基础知识和VS2010的小技巧总汇(2)[转]
1.使用关键字readonly ,表示这个字段只能在执行构造函数的过程中赋值,或者由初始化语句赋值 2..net4.0新增一个 Tuple 类,代表一个有序的N元组.可以调用Tuple.Create ...