首页 > 其他分享 >手撕Vuex-添加全局$store

手撕Vuex-添加全局$store

时间:2024-01-05 12:04:01浏览次数:28  
标签:Vue 方法 实例 组件 全局 Vuex options store


经过上一篇的介绍,了解到了 Vuex 的实现本质就是一个插件,所以要做的事情就是实现这个插件的代码编写即可。

本篇文章主要是实现一个全局的 $store,这个 $store 是挂载在 Vue 的原型上的,所以在任何一个组件当中都可以通过 this.$store 访问到。

我们先来看看 Vue 官方的,我们分别在 App.vue, HelloWorld.vue 中打印 this.$store,看看能不能访问到。

mounted() {
  console.log(this.$store);
}

手撕Vuex-添加全局$store_前端框架

可以看到都访问到了,那么我们就可以开始实现了。

官方开发插件文档:https://cn.vuejs.org/guide/reusability/plugins.html

我这里直接上代码,创建一个 Nuex.js 文件,在文件中先简单的暴露一个 install 方法。

这个 install 方法是 Vue.use() 调用的,所以在这个方法中可以接收到 Vue 的实例,然后在这个方法中实现我们的逻辑。

在使用 Vuex 的时候需要传递一个 store 对象,这个 store 对象就是我们的仓库,所以我们还需要在 Nuex.js 文件中暴露一个 Store 属性,这个属性的取值是一个类。

最终的代码如下:

/**
 * install方法会在外界调用Vue.use的时候执行
 * 并且在执行的时候会把Vue实例和一些额外的参数传递给我们
 * @param Vue Vue实例
 * @param options 额外的参数
 */
const install = (Vue, options) => {
}

export default {
    install
}

这样我们的插件就创建完毕了,接下来就是在 install 方法中实现我们的逻辑。给每一个Vue实例都添加一个 $store 属性。

在Vue中有一个名称叫做mixin方法,这个方法会在创建每一个Vue实例的时候执行,所以我们可以通过mixin方法给每一个Vue实例添加 $store 属性。

紧接着继续改写我们的代码,调用 Vue.mixin 方法重写 beforeCreate 方法,这个方法会在每一个组件创建的时候执行。

具体的核心逻辑我这里先不写,我先在 beforeCreate 方法中打印一下组件的一些参数信息。

手撕Vuex-添加全局$store_javascript_02

打开浏览器控制台,运行结果如下:

手撕Vuex-添加全局$store_前端框架_03

可以看到在 beforeCreate 方法中打印了三次,Vue 实例化的时候会先实例化根组件,然后在实例化根组件的时候会先实例化子组件,所以会打印三次。(Vue,App, HelloWorld)

如何验证这个结论呢那么就是分别打印一下实例化组件的名称,根组件还没有添加 name 属性,先给我们的根组件也取一个名字,叫做 root:

手撕Vuex-添加全局$store_前端框架_04

在更改下 beforeCreate 方法打印的属性值为 $options.name 即可:

手撕Vuex-添加全局$store_ecmascript_05

返回浏览器控制台观察输出结果:

手撕Vuex-添加全局$store_前端框架_06

输出的内容和我们的结论是一致的,知道了实例化的过程之后,接下来就是完善核心逻辑即可,我们知道在实例化过程中,首先实例化的是根组件,然后在实例化根组件的时候会先实例化子组件,所以我们可以在实例化根组件的时候给根组件添加一个 $store 属性,然后在实例化子组件的时候直接从父组件中取出 $store 属性赋值给子组件即可。

在根组件中有一个 store,只要将这个 store 赋值给 $store 即可,那么在子组件中就可以通过 this.$store 访问到了。

有了思路之后,我们就可以开始编写代码了,最终实现的代码如下:

beforeCreate() {
    /*
    如果是根组件, 那么默认就有store
    我们只需要将store变成$store即可
    */
    if (this.$options && this.$options.store) {
        this.$store = this.$options.store;
    } else {
        /*
        如果不是根组件, 那么默认没有store
        我们只需要将它父组件的$store赋值给它即可
        */
        this.$store = this.$parent.$store;
    }
}

然后在将之前组件中访问 this.$store 的代码放开(取消注释):

手撕Vuex-添加全局$store_javascript_07

然后重新运行项目,可以看到可以访问到 this.$store

手撕Vuex-添加全局$store_前端_08

到这里添加全局 $store 的代码就完成了(还没有实现数据共享,所以在各个组件当中访问共享数据的代码我都是注释掉了)。

标签:Vue,方法,实例,组件,全局,Vuex,options,store
From: https://blog.51cto.com/u_15652665/9112436

相关文章

  • 手撕Vuex-Vuex实现原理分析
    本章节主要围绕着手撕Vuex,那么在手撕之前,先来回顾一下Vuex的基本使用。创建一个Vuex项目,我这里采用vue-cli创建一个项目,然后安装Vuex。vuecreatevuex-demo选择Manuallyselectfeatures。这里只需要,Babel与Vuex。选择2.X版本的Vue:创建package.json:是否保存为模板......
  • 手撕Vue-Router-添加全局$router属性
    前言经过上一篇文章的介绍,完成了初始化路由相关信息的内容,接下来我们需要将路由信息挂载到Vue实例上,这样我们就可以在Vue实例中使用路由信息了。简而言之就是给每一个Vue实例添加一个$router属性,这个属性就是我们在上一篇文章中创建的VueRouter实例。实现思路我们需要在Vue实例创建......
  • 手撕Vuex-模块化共享数据下
    前言好,经过上一篇的介绍,了解了Vuex当中的模块化,本章主要介绍Vuex当中的模块化共享数据下篇。我们知道在全局的Store对象当中,我们可以定义全局的数据,那么如果我们在模块当中也定义了一个属性名称和全局的属性名称相同,那么会发生什么呢?我们先来看看,在全局当中定义了一个global......
  • 手撕Vuex-提取模块信息
    前言在上一篇【手撕Vuex-模块化共享数据】文章中,已经了解了模块化,与共享数据的注意点。那么接下来就要在我们自己的Nuex中实现共享数据模块化的功能。那么怎么在我们自己的Nuex中实现共享数据模块化的功能呢?处理数据也非常的简单,是不是就是处理一下子模块的数据,处理一下子模块......
  • 手撕Vuex-安装模块数据
    前言根据上一篇,【手写Vuex】-提取模块信息,我们已经可以获取到模块的信息了,将模块信息变成了我们想要的数据结构,接下来我们就要根据模块的信息,来安装模块的数据。在上一篇当中我们定义了一个ModuleCollection类,这个类的作用就是将模块的信息转换成我们想要的数据结构。接下来我们......
  • 手撕Vuex-安装模块方法
    前言经过上一篇文章的介绍,我们实现了将模块安装到store中,那么本章我们就来介绍一下怎么安装模块当中的方法也就是actions、mutations、getters。所以本次文章的目标就是将模块当中的actions、mutations、getters安装到store中,然后在组件中使用。分析阶段那么安装actions、m......
  • uniapp:全局消息是推送,实现app在线更新,WebSocket,apk上传
    全局消息是推送,实现app在线更新,WebSocket1.在main.js中定义全局的WebSocket2.java后端建立和发送WebSocket3.通知所有用户更新背景:开发人员开发后app后打包成.apk文件,上传后通知厂区在线用户更新app。那么没在线的怎么办?因为我们在上一篇博客中写了,在app打开的时候回去校验是否......
  • Vue开发者必备!手把手教你实现类似Element Plus的全局提示组件!
    前言在Web开发中,用户体验至关重要。有效的信息提示和错误消息对于确保用户更好地理解和操作至关重要。在这个背景下,全局弹框提示组件成为了一个非常有用的工具。Vue.js,作为当前最受欢迎的前端框架之一,为创建灵活、可复用的弹框组件提供了强大的支持。本文将介绍一个简单而强大的全......
  • Gateway网关模块中设置全局过滤器
    以下是一个用来做登录校验的全局过滤器@Component@Slf4jpublicclassAuthorizeFilterimplementsOrdered,GlobalFilter{@OverridepublicMono<Void>filter(ServerWebExchangeexchange,GatewayFilterChainchain){//1.获取request和response对象......
  • 全局变量与局部变量区别
    #define_CRT_SECURE_NO_WARNINGS1#include<stdio.h>inti;//全局变量不初始化默认为0,局部变量不初始化默认为随机值intmain(){ i--;//此时i为-1 if(i>sizeof(i))//sizeof()-计算变量/类型所在内存的大小>=0无符号数 //此时一个有符号的复数和一个无符号数进行比较时......