vuex相关(actions和mutation的异曲同工)

vuex说明:

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

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

流程示意图

image.png

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

  • 多个视图依赖于同一状态。
  • 来自不同视图的行为需要变更同一状态。
    对于问题一,传参的方法对于多层嵌套的组件将会非常繁琐,并且对于兄弟组件间的状态传递无能为力。
    对于问题二,我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱,通常会导致无法维护的代码。

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

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

image.png

适用于型单页应用

安装vuex

npm i vuex

新建文件夹store,建议目录


image.png

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

image.png

image.png

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

image.png

image.png

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

image.png

image.png

操作之后数据变化,

image.png

image.png

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,053评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,527评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,779评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,685评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,699评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,609评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,989评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,654评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,890评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,634评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,716评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,394评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,976评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,950评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,191评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,849评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,458评论 2 342

推荐阅读更多精彩内容

  • 使用说明-Vuex 安装 直接下载 / CDN 引用 Unpkg.com 提供了基于 NPM 的 CDN 链接。以...
    满是裂缝的花卷阅读 987评论 0 8
  • Vuex是什么? Vuex 是一个专为 Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件...
    萧玄辞阅读 3,102评论 0 6
  • Vuex 是什么? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有...
    skycolor阅读 814评论 0 1
  • 安装 npm npm install vuex --save 在一个模块化的打包系统中,您必须显式地通过Vue.u...
    萧玄辞阅读 2,924评论 0 7
  • 01 每年运动会的时候,我基本上都会报一项长跑,是所有项目里最长的那个长跑。如果不报,总会感觉有点遗憾。 之前不管...
    一滩懒泥_阅读 576评论 1 0