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