手撕Vuex-实现共享数据

合集 - 手写VueX(11)

1.手撕Vuex-Vuex实现原理分析2023-10-282.手撕Vuex-添加全局$store2023-10-28

3.手撕Vuex-实现共享数据2023-10-28

4.手撕Vuex-实现getters方法2023-10-285.手撕Vuex-实现mutations方法2023-10-316.手撕Vuex-实现actions方法2023-11-017.手撕Vuex-模块化共享数据上2023-11-058.手撕Vuex-模块化共享数据下2023-11-059.手撕Vuex-提取模块信息2023-11-0810.手撕Vuex-安装模块数据2023-11-1311.手撕Vuex-安装模块方法2023-11-18

收起

经过上一篇章介绍，完成了添加全局 $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 拿到需要共享的属性。

最终的代码如下：

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

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