【手写Vuex】-手撕Vuex-实现getters方法

原创

BNTang

修改于 2023-11-17 07:55:07

1560

修改于 2023-11-17 07:55:07

文章被收录于专栏：『学习与分享之旅』『学习与分享之旅』

前言

经上一篇章介绍，完成了实现共享数据的功能，实现方式是在 Store 构造函数中将创建 Store 时将需要共享的数据添加到 Store 上面，这样将来我们就能通过 this.$store 拿到这个 Store，既然能拿到这个 Store，我们就可以通过 .state 拿到需要共享的属性。

除了可以通过 .state 拿到共享数据之外，还可以通过 .getters 拿到共享数据，所以本章我们需要在 Nuex.js 文件中实现 getters 的功能。

首先在创建 Store 仓库的时候，需要传递一个 getters 对象，这个对象中存放的就是我们需要共享的数据，getters 对象中的每一个属性都是一个函数，这个函数的返回值就是我们需要共享的数据。

getters 属性是通过计算属性实现的。

我们先编写一下如上所说的内容代码方面的实现，更改 store/index.js：

export default new Vuex.Store({
    state: {
        name: 'BNTang'
    },
    getters: {
        myName(state) {
            return state.name + '666';
        }
    },
    mutations: {},
    actions: {},
    modules: {}
});

在使用之前，我们先将 Nuex.js 文件中的代码进行改写，将传递进来的getters放到Store上面，这样我们就能通过this.$store.getters拿到这个getters对象，既然能拿到这个getters对象，我们就可以通过 .myName 拿到需要共享的属性。

代码如下：

class Store {
    constructor(options) {
        this.state = options.state;

        // 将传递进来的getters放到Store上
        this.getters = options.getters;
    }
}

这么一顿操作之后，我们就能在组件中通过 this.$store.getters 拿到共享数据了。

App.vue：

<template>
  <div id="app">
    <p>{{ this.$store.getters.myName }}</p>
    <HelloWorld/>
  </div>
</template>

HelloWorld.vue:

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

打开浏览器查看效果：

可以看到页面上显示的并不是我们想要的结果，我们想要的结果是 BNTang666，但是页面上显示的是一个函数，这是为什么呢？

代码实现

其实在 Store 构造函数中，是不能直接将 getters 对象放到 Store 上面的, 需要自己额外处理一下，处理的方式分为如下四步骤：

拿到传递进来的getters
在Store上新增一个getters的属性
将传递进来的getters中的方法添加到当前Store的getters上
将getters中的方法执行, 并且将state传递过去

代码如下：

class Store {
    constructor(options) {
        this.state = options.state;

        // 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);
                }
            })
        }
    }
}

将代码改写之后，打开浏览器查看效果：