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(); ...
随机推荐
- javascript前端面试题及答案整理
Part1 手写代码 现场手写代码是现在面试中很常见的一类面试题,考察基础的数据结构与算法能力. 1 数组去重的实现 基本数组去重 Array.prototype.unique = function( ...
- bzoj 3307: 雨天的尾巴【树剖lca+树上差分+线段树合并】
这居然是我第一次写线段树合并--所以我居然在合并的时候加点结果WAWAWAMLEMLEMLE--!ro的时候居然直接指到la就行-- 树上差分,每个点建一棵动态开点线段树,然后统计答案的时候合并即可 ...
- hdu 3007【最小圆覆盖-随机增量法模板】
#include<iostream> #include<cstdio> #include<cmath> #include<algorithm> usin ...
- [App Store Connect帮助]七、在 App Store 上发行(2.5)设定价格与销售范围:向企业或教育机构分发您的 App
您可以向您添加至 App Store Connect 以及参与“Apple 商务”或“校园教务管理”的用户.企业或教育机构单独分发您的非公开 App.此选项仅在您的 App 尚未获得批准时可用. 有关 ...
- [Swift通天遁地]一、超级工具-(2)制作美观大方的环形进度条
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
- flask框架模板系统
flask模板引擎 flask默认使用了Jinja2模板引擎,我们在使用模板的时候,需要在同级目录文件夹下 创建一个templates的文件夹,然后这个文件夹内放置我们想要的模板实例即可: 在正常普通 ...
- [TJOI2013]松鼠聚会
Description 有N个小松鼠,它们的家用一个点x,y表示,两个点的距离定义为:点(x,y)和它周围的8个点即上下左右四个点和对角的四个点,距离为1.现在N个松鼠要走到一个松鼠家去,求走过的最短 ...
- [poj3744] Scout YYF I【概率dp 数学期望】
传送门:http://poj.org/problem?id=3744 令f(i)表示到i,安全的概率.则f(i) = f(i - 1) * p + f(i - 2) * (1 - p),若i位置有地雷 ...
- BP神经网络算法改进
周志华机器学习BP改进 试设计一个算法,能通过动态调整学习率显著提升收敛速度,编程实现该算法,并选择两个UCI数据集与标准的BP算法进行实验比较. 1.方法设计 传统的BP算法改进主要有两类: - 启 ...
- 四大开源协议比较:BSD、Apache、GPL、LGPL【转载】
四大开源协议原文链接 本文参考文献:http://www.fsf.org/licensing/licenses/ 现今存在的开源协议很多,而经过Open Source Initiative组织通过批准 ...