Vuex中Mutations怎么理解?怎么用?


本文摘自PHP中文网,作者青灯夜游,侵删。

相关推荐:《vue.js教程》

通俗的理解mutations,里面装着一些改变数据方法的集合,这是Vuex设计很重要的一点,就是把处理数据逻辑方法全部放在mutations里面,使得数据和视图分离。

怎么用mutations?

mutation结构:每一个mutation都有一个字符串类型的事件类型(type)和回调函数(handler),也可以理解为{type:handler()},这和订阅发布有点类似。先注册事件,当触发响应类型的时候调用handker(),调用type的时候需要用到store.commit方法。

1

2

3

4

5

6

7

8

9

const store = new Vuex.Store({

   state: {

       count: 1

       },

   mutations: {

        increment (state) {      //注册事件,type:increment,handler第一个参数是state;

         // 变更状态

       state.count++}}})

  store.commit('increment')   //调用type,触发handler(state)

载荷(payload):简单的理解就是往handler(stage)中传参handler(stage,payload);一般是个对象。

1

2

3

4

mutations: {

increment (state, n) {

    state.count += n}}

store.commit('increment', 10)

mutation-types:将常量放在单独的文件中,方便协作开发。

mutation-types.js

1

export const SOME_MUTATION = 'SOME_MUTATION'

store.js

1

2

3

4

5

6

7

8

9

10

11

import Vuex from 'vuex'

import { SOME_MUTATION } from './mutation-types'

  const store = new Vuex.Store({

    state: { ... },

    mutations: {

     // 我们可以使用 ES2015 风格的计算属性命名功能来使用一个常量作为函数名

    [SOME_MUTATION] (state) {

    // mutate state

  }

}

})

commit:提交可以在组件中使用 this.$store.commit('xxx') 提交 mutation,或者使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用(需要在根节点注入 store)。

1

2

3

4

5

6

7

8

import { mapMutations } from 'vuex'

export default {

methods: {

  ...mapMutations([

    'increment' // 映射 this.increment() 为 this.$store.commit('increment')]),

  ...mapMutations({

    add: 'increment' // 映射 this.add() 为 this.$store.commit('increment')

  })}}

源码分析

1

2

3

4

5

6

7

8

9

10

function registerMutation (store, type, handler, path = []) {

 //4个参数,store是Store实例,type为mutation的type,handler,path为当前模块路径

    const entry = store._mutations[type] || (store._mutations[type] =

[])  //通过type拿到对应的mutation对象数组

     entry.push(function wrappedMutationHandler (payload) {

     //将mutation包装成函数push到数组中,同时添加载荷payload参数   

     handler(getNestedState(store.state, path), payload)

     //通过getNestedState()得到当前的state,同时添加载荷payload参数

   })

 }

commit:调用mutation

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

commit (type, payload, options) {

  // 3个参数,type是mutation类型,payload载荷,options配置

    if (isObject(type) && type.type) {

       // 当type为object类型,

      options = payload

      payload = type

      type = type.type

  }

 const mutation = { type, payload }

 const entry = this._mutations[type]

   // 通过type查找对应的mutation

 if (!entry) {

  //找不到报错

   console.error(`[vuex] unknown mutation type: ${type}`)

   return

 }

 this._withCommit(() => {

   entry.forEach(function commitIterator (handler) {

   // 遍历type对应的mutation对象数组,执行handle(payload)方法

   //也就是开始执行wrappedMutationHandler(handler)

     handler(payload)

   })

 })

 if (!options || !options.silent) {

   this._subscribers.forEach(sub => sub(mutation, this.state))

    //把mutation和根state作为参数传入

 }

}

subscribers:订阅store的mutation

1

2

3

4

5

6

7

8

9

10

11

12

subscribe (fn) {

const subs = this._subscribers

if (subs.indexOf(fn) < 0) {

  subs.push(fn)

  }

return () => {

  const i = subs.indexOf(fn)

  if (i > -1) {

    subs.splice(i, 1)

    }

  }

 }

更多编程相关知识,请访问:编程教学!!

以上就是Vuex中Mutations怎么理解?怎么用?的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

vue.use方法怎么用

bootstrap和vue的区别

vue中怎么定义自定义组件

vue 中使用分页

vue.js前端框架有哪些特点

怎么用npm安装vue

vue和react有什么相似点

.vue文件可以写注释吗

怎么安装vue.js

.vue文件里怎么写scss?

更多相关阅读请进入《vue》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...