手撕Vuex-Vuex實現原理分析

BNTang發表於2023-10-28
Vue

本章節主要圍繞著手撕 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 的開發有更深的理解。

相關文章