剖析 Vuex：从基本原理到手写实战

前端

2023-12-08 06:33:35

Vuex 简介

Vuex 是一个专为 Vue.js 应用程序设计的库，用于集中管理应用程序的状态。它遵循 Flux 架构模式，提供了一个单一的状态存储，组件可以通过它来获取和修改状态。

Vuex 的设计目标

Vuex 的设计目标是：

提供一个单一的状态存储，使组件能够访问和修改状态
使状态可测试和可追踪，便于调试和维护
提供中间件支持，以便对状态变更进行拦截和处理
提供热重载支持，以便在开发过程中实时更新状态

Vuex 的基本原理

Vuex 的基本原理是将应用程序的状态存储在一个单一的对象中，称为 store。组件可以通过 store 来获取和修改状态。

store 是一个响应式对象，这意味着当 store 中的状态发生变化时，所有依赖该状态的组件都会自动更新。

手写一个简单的 Vuex

下面，我们将通过一个简单的例子来演示如何手写一个 Vuex 实例。

1. 创建 store

首先，我们需要创建一个 store。可以使用 Vuex.Store 类来创建 store。

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    incrementAsync ({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  },
  getters: {
    doubleCount: state => {
      return state.count * 2
    }
  }
})

export default store

2. 使用 store

在组件中，我们可以通过 useStore 钩子来使用 store。

import { useStore } from 'vuex'

export default {
  setup () {
    const store = useStore()

    return {
      count: store.state.count,
      increment: () => store.commit('increment'),
      incrementAsync: () => store.dispatch('incrementAsync'),
      doubleCount: store.getters.doubleCount
    }
  }
}