首页 > 其他分享 >手撕Vuex-实现共享数据

手撕Vuex-实现共享数据

时间:2024-01-05 12:04:31浏览次数:23  
标签:Vuex state Nuex store 共享 数据 Store


经过上一篇章介绍,完成了添加全局 $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;
    }
}

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

手撕Vuex-实现共享数据_vue.js

标签:Vuex,state,Nuex,store,共享,数据,Store
From: https://blog.51cto.com/u_15652665/9112431

相关文章

  • 手撕Vuex-实现getters方法
    经上一篇章介绍,完成了实现共享数据的功能,实现方式是在Store构造函数中将创建Store时将需要共享的数据添加到Store上面,这样将来我们就能通过this.$store拿到这个Store,既然能拿到这个Store,我们就可以通过.state拿到需要共享的属性。除了可以通过.state拿到共享数据之外......
  • 手撕Vuex-添加全局$store
    经过上一篇的介绍,了解到了Vuex的实现本质就是一个插件,所以要做的事情就是实现这个插件的代码编写即可。本篇文章主要是实现一个全局的$store,这个$store是挂载在Vue的原型上的,所以在任何一个组件当中都可以通过this.$store访问到。我们先来看看Vue官方的,我们分别在App.v......
  • 手撕Vuex-Vuex实现原理分析
    本章节主要围绕着手撕Vuex,那么在手撕之前,先来回顾一下Vuex的基本使用。创建一个Vuex项目,我这里采用vue-cli创建一个项目,然后安装Vuex。vuecreatevuex-demo选择Manuallyselectfeatures。这里只需要,Babel与Vuex。选择2.X版本的Vue:创建package.json:是否保存为模板......
  • 大数据安全与隐私:挑战与解决策略
    1.背景介绍大数据安全与隐私是当今社会中最关键的问题之一。随着互联网的普及和大数据技术的发展,人们生活中的各种数据都在网上流传,包括个人信息、商业秘密、国家机密等。这些数据的泄露和滥用会对个人、企业和国家造成严重后果。因此,大数据安全与隐私变得越来越重要。在大数据领域......
  • 大数据处理:高性能计算在数据挑战中的应用
    1.背景介绍大数据处理是指利用计算机科学和应用技术来处理和分析大规模、高速、多源、不确定性和复杂性高的数据集。大数据处理的核心挑战是如何在有限的时间和资源内,高效地处理和分析这些复杂的数据。高性能计算(HighPerformanceComputing,HPC)是一种计算机科学技术,旨在解决那些......
  • 手撕Vuex-模块化共享数据下
    前言好,经过上一篇的介绍,了解了Vuex当中的模块化,本章主要介绍Vuex当中的模块化共享数据下篇。我们知道在全局的Store对象当中,我们可以定义全局的数据,那么如果我们在模块当中也定义了一个属性名称和全局的属性名称相同,那么会发生什么呢?我们先来看看,在全局当中定义了一个global......
  • 手撕Vuex-提取模块信息
    前言在上一篇【手撕Vuex-模块化共享数据】文章中,已经了解了模块化,与共享数据的注意点。那么接下来就要在我们自己的Nuex中实现共享数据模块化的功能。那么怎么在我们自己的Nuex中实现共享数据模块化的功能呢?处理数据也非常的简单,是不是就是处理一下子模块的数据,处理一下子模块......
  • 手撕Vuex-安装模块数据
    前言根据上一篇,【手写Vuex】-提取模块信息,我们已经可以获取到模块的信息了,将模块信息变成了我们想要的数据结构,接下来我们就要根据模块的信息,来安装模块的数据。在上一篇当中我们定义了一个ModuleCollection类,这个类的作用就是将模块的信息转换成我们想要的数据结构。接下来我们......
  • 手撕Vuex-安装模块方法
    前言经过上一篇文章的介绍,我们实现了将模块安装到store中,那么本章我们就来介绍一下怎么安装模块当中的方法也就是actions、mutations、getters。所以本次文章的目标就是将模块当中的actions、mutations、getters安装到store中,然后在组件中使用。分析阶段那么安装actions、m......
  • CAN-EYE冠层数据模拟工具的下载、安装
      本文介绍植被指数计算软件CAN-EYE的下载、安装方法。  CAN-EYE软件是由法国国家农业研究院(FrenchNationalInstituteofAgriculturalResearch,INRA)下属的EMMAH实验室(MediterraneanEnvironmentandAgro-hydroSystemModelling)开发的免费软件,用以从鱼眼镜头、普通镜头所......