前言
经上一篇章介绍，完成了实现共享数据的功能，实现方式是在 Store 构造函数中将创建 Store 时将需要共享的数据添加到 Store 上面，这样将来我们就能通过 this.$store 拿到这个 Store，既然能拿到这个 Store，我们就可以通过 .state 拿到需要共享的属性。
除了可以通过 .state 拿到共享数据之外，还可以通过 .getters 拿到共享数据，所以本章我们需要在 Nuex.js 文件中实现 getters 的功能。
首先在创建 Store 仓库的时候，需要传递一个 getters 对象，这个对象中存放的就是我们需要共享的数据，getters 对象中的每一个属性都是一个函数，这个函数的返回值就是我们需要共享的数据。
getters 属性是通过计算属性实现的。
我们先编写一下如上所说的内容代码方面的实现，更改 store/index.js：
代码语言：javascript复制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 拿到需要共享的属性。
代码如下：
代码语言：javascript复制class Store {
constructor(options) {
this.state = options.state;
// 将传递进来的getters放到Store上
this.getters = options.getters;
}
}这么一顿操作之后，我们就能在组件中通过 this.$store.getters 拿到共享数据了。
App.vue：
代码语言：html复制<template>
<div id="app">
<p>{{ this.$store.getters.myName }}</p>
<HelloWorld/>
</div>
</template>HelloWorld.vue:
代码语言：html复制<template>
<div class="hello">
<p>{{ this.$store.getters.myName }}</p>
</div>
</template>打开浏览器查看效果：
可以看到页面上显示的并不是我们想要的结果，我们想要的结果是 BNTang666，但是页面上显示的是一个函数，这是为什么呢？
代码实现
其实在 Store 构造函数中，是不能直接将 getters 对象放到 Store 上面的, 需要自己额外处理一下，处理的方式分为如下四步骤：
- 拿到传递进来的getters
- 在Store上新增一个getters的属性
- 将传递进来的getters中的方法添加到当前Store的getters上
- 将getters中的方法执行, 并且将state传递过去
代码如下：
代码语言：javascript复制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);
}
})
}
}
}将代码改写之后，打开浏览器查看效果：
可以看到页面上显示的是我们想要的结果。
到这里我们就完成了 getters 的实现。
最后
我正在参与2023腾讯技术创作特训营第三期有奖征文，组队打卡瓜分大奖！
