合集-手写VueX
摘要：本章节主要围绕着手撕 Vuex，那么在手撕之前，先来回顾一下 Vuex 的基本使用。 创建一个 Vuex 项目，我这里采用 vue-cli 创建一个项目，然后安装 Vuex。 vue create vuex-demo 选择 Manually select features。 这里只需要，Babel
阅读全文
摘要：经过上一篇的介绍，了解到了 Vuex 的实现本质就是一个插件，所以要做的事情就是实现这个插件的代码编写即可。 本篇文章主要是实现一个全局的 $store，这个 $store 是挂载在 Vue 的原型上的，所以在任何一个组件当中都可以通过 this.$store 访问到。 我们先来看看 Vue 官方的
阅读全文
摘要：经过上一篇章介绍，完成了添加全局 $store，接下来就是实现共享数据的功能。 在 Vuex 中，共享数据是通过 state 来实现的，所以我们需要在 Nuex.js 文件中实现 state 的功能。 在 Vuex 中，state 是一个对象，这个对象中存放的就是我们的共享数据，所以我们需要在 Nu
阅读全文
摘要：经上一篇章介绍，完成了实现共享数据的功能，实现方式是在 Store 构造函数中将创建 Store 时将需要共享的数据添加到 Store 上面，这样将来我们就能通过 this.$store 拿到这个 Store，既然能拿到这个 Store，我们就可以通过 .state 拿到需要共享的属性。 除了可以通
阅读全文
摘要：经过上一篇章介绍，完成了实现 getters 的功能，那么接下来本篇将会实现 mutations 的功能。 在实现之前我们先来回顾一下 mutations 的使用。 将官方的 Vuex 导入进来，因为我们的还没有实现，现用一下官方的，来演示一下 mutations 的使用。 mutations 是用
阅读全文
摘要：经过上一篇章介绍，完成了实现 mutations 的功能，那么接下来本篇将会实现 actions 的功能。 本篇我先介绍一下 actions 的作用，然后再介绍一下实现的思路，最后再实现代码。 actions 的作用是用来异步修改共享数据的，怎么异步修改，这个时候我们回到 Vue 的官方 Vuex
阅读全文
摘要：前言 好，经过上一篇的介绍，实现了 Vuex 当中的 actions 方法，接下来我们来实现 Vuex 当中的模块化共享数据（modules）。 modules 方法用于模块化共享数据，那么什么叫模块化共享数据呢？其实非常简单。 过去我们将所有模块的数据都放到 state 中共享，例如： 我们有三个
阅读全文
摘要：前言 好，经过上一篇的介绍，了解了 Vuex 当中的模块化，本章主要介绍 Vuex 当中的模块化共享数据下篇。 我们知道在全局的 Store 对象当中，我们可以定义全局的数据，那么如果我们在模块当中也定义了一个属性名称和全局的属性名称相同，那么会发生什么呢？ 我们先来看看，在全局当中定义了一个 gl
阅读全文
摘要：前言 在上一篇【手撕Vuex-模块化共享数据】文章中，已经了解了模块化，与共享数据的注意点。 那么接下来就要在我们自己的 Nuex 中实现共享数据模块化的功能。那么怎么在我们自己的 Nuex 中实现共享数据模块化的功能呢？ 处理数据 也非常的简单，是不是就是处理一下子模块的数据，处理一下子模块的 g
阅读全文
摘要：前言 根据上一篇，【手写Vuex】-提取模块信息，我们已经可以获取到模块的信息了，将模块信息变成了我们想要的数据结构，接下来我们就要根据模块的信息，来安装模块的数据。 在上一篇当中我们定义了一个 ModuleCollection 类，这个类的作用就是将模块的信息转换成我们想要的数据结构。 接下来我们
阅读全文
摘要：前言 经过上一篇文章的介绍，我们实现了将模块安装到 store 中，那么本章我们就来介绍一下怎么安装模块当中的方法也就是 actions、mutations、getters。 所以本次文章的目标就是将模块当中的 actions、mutations、getters 安装到 store 中，然后在组件中
阅读全文
浙公网安备 33010602011771号