【手写Vuex】-手撕Vuex-实现共享数据

2023-11-17 07:59:19 浏览数 (2)

前言

经过上一篇章介绍,完成了添加全局 $store,接下来就是实现共享数据的功能。

在 Vuex 中,共享数据是通过 state 来实现的,所以我们需要在 Nuex.js 文件中实现 state 的功能。

在 Vuex 中,state 是一个对象,这个对象中存放的就是我们的共享数据,所以我们需要在 Nuex.js 文件中定义一个 state 对象。

代码实现

在 store 目录中,我们给 Vue 注册 Nuex 时创建了 store 对象,并且定义了共享属性,在根组件中,使用了 store,那么我们在 install 方法中就可以通过 Vue 实例访问到 store 对象注册全局的 $store。

基于这些信息,我们就可以在 Nuex.js 文件中实现 state 的功能了。

只需要在 Store 构造函数中将创建Store时需要共享的数据添加到Store上面,这样将来我们就能通过this.$store拿到这个Store,既然能拿到这个Store,我们就可以通过 .state 拿到需要共享的属性。

最终的代码如下:

代码语言:javascript复制
class Store {
    constructor(options) {
        this.state = options.state;
    }
}

将访问共享数据的代码放开,打开浏览器查看效果:

总结

到这里我们就完成了共享数据的功能,实现共享数据主要是通过 state 属性来实现的,state 属性是在 Store 构造函数中定义的,所以我们需要在 Store 构造函数中将创建 Store 时将需要共享的数据添加到 Store 上面,这样将来我们就能通过 this.$store 拿到这个 Store,既然能拿到这个 Store,我们就可以通过 .state 拿到需要共享的属性。

我正在参与2023腾讯技术创作特训营第三期有奖征文,组队打卡瓜分大奖!

0 人点赞