Vuex.js进阶系列(53)--mutations常量和总结

  本章内容主要是对mutations最后一个知识点常量类型的分享和mutation的总结。


一、mutations的常量类型

1.产生原因

  在mutations中, 我们定义了很多事件类型(也就是其中的方法名称)。当项目增大时, Vuex管理的状态越来越多, 需要更新状态的情况越来越多, 意味Mutation中的方法越来越多。
  这会导致使用者需要花费大量的精力去记住这些方法, 甚至是多个文件间来回切换, 查看方法名称, 甚至如果不是复制的时候, 可能还会出现写错的情况。如何避免上述的问题呢?
  其中一种很常见的方案就是使用常量替代Mutation事件的类型。将这些常量放在一个单独的文件中, 方便管理以及让整个app所有的事件类型一目了然。

2.使用方式

  我们可以创建一个文件,并且在其中定义我们的常量, 使用一个常量来作为函数的名称。下面我们将mutations中的increate方法用常量INCREATE替代,具体代码如下所示:

//新创建的mutations-type.js文件
export const INCREATE = 'increate'
//在 index.js 文件中使用常量替代方法名
import {
  INCREATE
} from './mutations-type.js'

const store = new Vuex.Store({
    state:{
      counter:100,
    },
    mutations:{
      //原始方法
      // increase(state){
      //   state.counter++
      // },

      //常量替代方法
      [INCREATE](state){
        state.counter++
      },
    },
})
//在App.vue中用常量替代提交的方法名
<script>
  import {
    INCREATE
  }from '../store/mutations-type.js'

export default {
  name: 'App',
  methods:{
    addcounter(){
      // this.$store.commit('increase')
      this.$store.commit(INCREATE)
    }
  }
}
</script>

  上述三个代码中,在 mutations-type.js 文件声明了常量INCREATE,然后分别将 index.js 文件和 App.vue 文件中的 increate 方法名用常量INCREATE替代。
以上就是mutation中常量类型的简单介绍,下面小编总结一下mutations常用的知识点。


二、mutations总结

1.基本结构

① 作用
  用来修改state状态更新的唯一方式。state中任何状态的修改都必须经过mutations提交,因为mutations中有个浏览器插件 Devtools,该插件会记录和跟踪state中状态的所有变化,方便我们查找到底运行时在哪一步出错了。
② 组成
mutations的组成主要分成两大组成:事件类型和回调函数,比如:

//index.js文件
const store = new Vuex.Store({
    state:{
      counter:100,
    },
    mutations:{
      increase(state){
        state.counter++
      }
    }
})

  上述代码中,目的是点击一次按钮就使 counter 数值增加。increase是事件类型,(state){state.counter++} 是回调函数。
③ 更新状态
  借助上面的例子,我们在mutations 写好了相关的业务逻辑代码,需要将该处的业务实现起来,也就是需要更新counter的状态。主要通过commit方法进行更新,具体代码如下:

//App.vue
methods:{
    addcounter(){
        this.$store.commit('increase')
    }
}
2.传递参数

  传递参数的作用,是为了更够根据用户的需要进行状态的更新。比如上述的例子中,当用户点击按钮时,就将 counter 的值加5甚至加更多,此时单单通过上面的方法是没有办法实现的,因为没有获取到用户提供的数据,所以我们需要再引入参数,用该参数来存放用户提供的数据。
引入的参数主要有两种类型:单一变量和函数
① 单一变量
  针对用户点击按钮,counter 数值就增加5的需求,具体代码如下:

//index.js
const store = new Vuex.Store({
    state:{
      counter:100,
    },
    mutations:{
     increateCounter(state,count){
        state.counter += count
      }
    }
})
<!--App.vue-->
<template>
  <div id="app">
    <h2>{{$store.state.counter}}</h2>
    <button @click="addCount(5)" >+5</button>
  </div>
</template>
<script>
export default {
  name: 'App',
  methods:{
    addcounter(){
      this.$store.commit('increase')
    }
}
</script>

② 对象
  当用户传递进来的不是变量,而是一个对象,这个时候我们仅需要将参数变成对象类型即可。比如

const store = new Vuex.Store({
    mutations:{
     increateStu(state,stu){
        state.student.push(stu)
      }
    }
})

上述代码中,将 stu 参数添加到student对象中,在App.vue中调用该方法的代码如下:

<template>
  <div id="app">
    <button @click="addStu">添加学生</button>
  </div>
</template>
<script>
export default {
  name: 'App',
  methods:{
    addStu(){
      const stu = {id:500,name:'xiaoqi',age:30}
      this.$store.commit('increateStu',stu)
    }
  }
}
</script>
3.提交风格

主要有两种:commit 和 type。具体的区别查看下面的代码即可。

//App.vue
addCount(count){
    // 第一种提风格:commit
    this.$store.commit('increateCounter',count) 
    //第二种提交风格
    this.$store.commit({
      type:'increateCounter',
       count
      })
}
//index.js
const store = new Vuex.Store({
    state:{
      counter:100,
    },
    mutations:{
      // 提交风格
      increateCounter(state,payload){
        state.counter += payload.count
      }
    }
})

  要注意的是,第二种风格中,获取的count不再是单一的变量,而是整个 type对象,所以需要再声明一个变量,通过该变量来获取conut。比如本例payload

4.相应规则

① 响应式原理
响应式就是当数据发生改变的时候,页面中用到该数据的地方也会发生改变。
  当我们已经在store对象中定义某些属性时,属性就会被加入到响应式系统中,该系统就会监听属性是否发生变化,如果属性发生变化,就会通知界面中所有用到该属性的地方发生变化,这就是响应式的基本原理。
② 前提
  预先在store对象定义的属性是被加入到响应式系统中的,只有加入到响应式系统中的属性才会发生响应式的变化。
③ 使用方式
3-1 提前在store对象中定义了的变量

//index.js
const store = new Vuex.Store({
    state:{
      info:{
        name:'haha',
        age:13,
        height:1.45
      }
    },
    mutations:{
      // 响应式测试
      changeInfo(state){
        state.info.name='哈哈'
      }
    }
})
<!--App.vue-->
<template>
  <div id="app">
    <h2>响应式测试</h2>
    <button @click="changeInfo">修改信息</button>
    <h3>{{$store.state.info}}</h3>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods:{
    changeInfo(){
      this.$store.commit('changeInfo')
    }
  }
}
</script>

上述的代码,主要是对已经在store对象中定义了的属性 name 进行修改。
3-2 没有提前在store对象定义的属性
  如果属性没有提前在store对象定义,是不能够加入到响应式系统中的,但是在开发中,又可能需要像对象增加新的属性。这个时候就可以通过set方法解决,比如:

//index.js
      changeInfo(state){
            Vue.set(state.info,'address','China')
      }

  该方法第一个参数是要修改的对象名,第二个参数是要增加是属性名,第三个参数是新增加属性的值。比如本例中为inof对象新增加数值是“China”的address属性。

5.常量类型

  主要是为了防止今后大项目时方法名过多而导致出错的问题,用常量来替代方法名,便于管理,其用法在上面有写,这里就不进行阐述了。

以上就是Vuex核心概念mutations的总体介绍,如果有什么不懂的可以在评论区找小编哟~
❤今天又是美好的一天,祝大家假期愉快o( ̄︶ ̄)o❤

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