vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vuex mutations

详解vuex中mutations方法的使用与实现

作者:BNTang

这篇文章主要为大家详细介绍了vuex中mutations方法的使用与实现的相关知识,文中的示例代码简洁易懂,具有一定的学习价值,感兴趣的小伙伴可以跟随小编一起了解一下

经过上一篇章介绍,完成了实现 getters 的功能,那么接下来本篇将会实现 mutations 的功能。

在实现之前我们先来回顾一下 mutations 的使用。

将官方的 Vuex 导入进来,因为我们的还没有实现,现用一下官方的,来演示一下 mutations 的使用。

mutations 是用来修改共享数据的,先在 mutations 中定义一个方法,这个方法接受两个参数,第一个参数是 state,第二个参数是 payload,payload 是一个对象,这个对象中存放的是我们需要修改的数据。

addNum(state, payload) {
    state.num += payload;
},

在 state 当中定义 num:

接下来就是使用了,使用的时候需要使用 commit 方法,commit 方法接受两个参数,第一个参数是方法名,第二个参数是 payload,payload 是一个对象,这个对象中存放的是我们需要修改的数据。

随便找一个组件,先展示我们的 num,然后在编写一个按钮,点击按钮之后调用 addNum 方法,传入一个参数 10,这样就可以实现 num 的增加了。

展示 num,我这里在 HelloWorld.vue 组件中进行展示的:

<template>
  <div class="hello">
    <p>{{ this.$store.state.num }}</p>
  </div>
</template>

展示完毕之后在编写一个按钮,点击按钮之后调用 addNum 方法:

<button @click="myFn">我是按钮</button>

在 HelloWorld.vue 组件中编写 myFn 方法:

myFn() {
  this.$store.commit('addNum', 10);
},

好了到这里,我们的基本结构搭建完毕,运行一下,看看效果:

这个就是 mutations 的基本使用,那么了解完和回顾完毕之后,接下来我们就来实现 mutations 的功能。

其实 mutations 的实现和 getters 的实现差不多,好,我们废话不多说,直接来处理下吧,我先将上一篇处理 getters 的代码封装下,然后再来处理 mutations 的代码。

我单独抽取一个 initGetters 来做这个事情,这样代码就清晰了很多,这个 initGetters 方法接受一个 options,然后在将之前处理的代码放进去即可。

代码如下:

constructor(options) {
    this.state = options.state;
    // 将传递进来的 getters 放到 Store 上
    this.initGetters(options);
}

initGetters(options) {
    // 1.拿到传递进来的getters
    let getters = options.getters || {};
    // 2.在Store上新增一个getters的属性
    this.getters = {};
    // 3.将传递进来的getters中的方法添加到当前Store的getters上
    for (let key in getters) {
        Object.defineProperty(this.getters, key, {
            get: () => {
                // 4.将getters中的方法执行, 并且将state传递过去
                return getters[key](this.state);
            }
        })
    }
}

这样我们的 getters 就处理完毕了,接下来我们就来处理 mutations 的代码。

一样的我编写一个 initMutations 方法,这个方法接受一个 options, 这里的步骤和 getters 的步骤是一样的,我们先来看一下代码:

initMutations(options) {
    // 1.拿到传递进来的mutations
    let mutations = options.mutations || {};
    // 2.在Store上新增一个mutations的属性
    this.mutations = {};
    // 3.将传递进来的mutations中的方法添加到当前Store的mutations上
    for (let key in mutations) {
        this.mutations[key] = (payload) => {
            mutations[key](this.state, payload);
        }
    }
}

这样 Store 上面就有了一个 mutations 的属性,这个属性中存放的是我们传递进来的 mutations 方法,先来验证一下,打开浏览器,看看效果:

注意点:记得将官方的 Vuex 注释掉,用我们自己的 Nuex。

这样我们的 mutations 就处理完毕了,接下来我们就来处理一下 commit 方法。

通过之前我们在使用 mutations 的时候,是通过 store.commit 方法来调用的,所以我们需要在 Store 上面添加一个 commit 方法,这个方法接受两个参数,第一个参数是方法名,第二个参数是 payload,payload 是一个对象,这个对象中存放的是我们需要修改的数据。

commit 方法具体的实现代码逻辑就是去 mutations 中找到对应的方法,然后执行这个方法,将 state 和 payload 传递过去。

代码如下:

commit(type, payload) {
    this.mutations[type](payload);
}

实现了 commit 方法之后,我们就可以在组件中使用了,我们先来验证一下,打开浏览器,看看效果:

我这里不截图了,效果就是点击了按钮发现 num 值并没有发生变化,这是为什么呢?

因为我们在 mutations 中修改的是 state 当中的数据,state 并没有实现双向绑定,所以不改变是正常的。

那么在 mutations 中更改了 state 的数据之后,我们怎么去更新视图呢?这里我们只需要将 state 变成双向绑定的即可,这里我们使用 Vue 当中的 util 工具类来进行快速实现双向绑定。

正好呢通过这个问题,可以让大家知道在 Vue 中的 util 工具类中提供了有一个方法叫做 defineReactive,这个方法可以让我们的数据变成双向绑定的。

通过这个方法就可以快速的将某个数据变成双向绑定的数据,defineReactive 这个方法接收三个参数:

好了,废话不多说,我们直接来处理一下吧,我们先导入 Vue,就可以通过 Vue.util.defineReactive 来调用这个方法了。

代码如下:

Vue.util.defineReactive(this, 'state', options.state);

本章的重点就是要知道在 Vue 当中有 defineReactive 方法,这个方法可以让我们的数据变成双向绑定的,这样我们就可以在 mutations 中修改 state 的数据之后,视图也会发生变化了。

这样我们的 state 就变成了双向绑定的了,验证一下,打开浏览器,看看效果即可,好了到这里,我们的 mutations 就处理完毕了。

以上就是详解vuex中mutations方法的使用与实现的详细内容,更多关于vuex mutations的资料请关注脚本之家其它相关文章!

您可能感兴趣的文章:
阅读全文