526互联

手撕Vuex-Vuex实现原理分析

发布时间 2023-10-28 11:33:26作者: BNTang

本章节主要围绕着手撕 Vuex，那么在手撕之前，先来回顾一下 Vuex 的基本使用。

创建一个 Vuex 项目，我这里采用 vue-cli 创建一个项目，然后安装 Vuex。

vue create vuex-demo

image-20231026224555021

选择 Manually select features。

image-20231026225142303

这里只需要，Babel 与 Vuex。

选择 2.X 版本的 Vue：

image-20231026225824095

创建 package.json：

image-20231026225838388

是否保存为模板这里我选择不：

image-20231026225904183

到这里我们的模板项目就创建完毕了。

紧接着找到 store 文件夹下的 index.js，在文件中导入了 Vuex, 可以看到 Vuex 的使用非常简单，只需要创建一个 store，然后在 Vue 的实例中注入 store，就可以在组件中使用了。

在基础的结构当中分别有 state、mutations、actions、modules 每个属性分别作用如下：

  • state：存放状态，可以通过 this.$store.state 访问到。（用于保存全局共享数据）
  • mutations：存放同步修改 state 的方法，可以通过 this.$store.commit 方法访问到。（用于同步修改共享数据）
  • actions：存放异步修改 state 的方法，可以通过 this.$store.dispatch 方法访问到。（用于异步修改共享数据）
  • modules：存放模块，可以通过 this.$store.state.模块名 访问到。（用户模块化共享数据）

在 Vuex 当中定义的数据，都是全局共享的，所以在任何一个组件当中都可以通过 this.$store.state 访问到，接下来先简单的使用一下 Vuex。

在 state 当中定义一个 name，然后在组件当中使用。

App.vue：

<template>
  <div id="app">
    {{ this.$store.state.name }}
    <HelloWorld/>
  </div>
</template>

HelloWorld.vue：

<template>
  <div class="hello">
    {{ this.$store.state.name }}
  </div>
</template>

npm run serve 启动项目，可以看到页面上显示了 name 的值。

接下来就可以开始手撕 Vuex。在手撕之前我们先分析一下 Vuex 的使用过程。

在 index.js 首先是将 Vuex 导入了进来，然后通过 Vue.use(Vuex) 将 Vuex 注册到 Vue 的原型上，Vue.use(Vuex) 这一步其实是对 Vue 的扩展就是安装了 Vuex 插件，这就是 Vuex 的第一个特点。

Vuex 特点1

  • 使用 Vuex 的时候需要用到 Vue 的 use 方法

那么在之前的 Vue 文章介绍到 use 方法是用于注册插件的，所以 Vuex 的本质就是一个插件。所以实现 Vuex 就是在实现一个全局共享数据的插件。

Vuex 特点2

在使用 Vuex 的时候我们会通过 Vuex.Store 创建一个仓库，所以还需要在 Vuex 中新增 Store 属性，这个属性的取值是一个类。

Vuex 特点3

为了保证每个Vue实例中都能通过 this.$store 拿到仓库, 我们还需要给每个Vue实例都动态添加一个 $store 属性

?> 小 Tips：博主建议在继续往下看之前，先去看看 Vue 插件的开发，这样会对 Vuex 的开发有更深的理解。