Vuex原理剖析：亲手打造简易Vuex，从入门到精通！

前端

2023-11-22 11:49:20

架构概述

Vuex是一个专为Vue.js应用程序设计的状态管理工具，旨在通过集中式存储管理应用的所有组件的状态，并以响应式的方式使其能够被访问和修改。

核心概念

1. 状态（State）

State是Vuex的核心，它是一个包含应用所有数据的状态对象。这个对象是响应式的，当其发生改变时，所有依赖它的组件都会更新。

2. Mutation

Mutation是唯一允许修改状态的方法。Mutation必须是同步的，并且必须使用显式提交的方式进行。这确保了应用程序的状态总是处于一个已知的状态，并允许我们对状态的修改进行调试和跟踪。

3. Action

Action是处理异步操作的函数。它们可以包含任何异步操作，例如发起网络请求或调用其他API。Action不能直接修改状态，它们必须提交Mutation来实现。

4. Getter

Getter是用于从状态中派生数据的函数。它们可以被组件使用来访问状态，而无需直接修改状态。Getter必须是纯函数，这意味着它们不能修改状态，也不能产生副作用。

5. 模块化

Vuex支持模块化，这使得我们可以将应用程序的状态和逻辑拆分成更小的部分。每个模块都有自己的State、Mutation、Action和Getter，并且可以被其他模块导入和使用。

实现简易Vuex

现在，让我们尝试自己动手实现一个简易的Vuex。

创建一个Vuex实例

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
    }
  }
})

在组件中使用Vuex

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double Count: {{ doubleCount }}</p>
    <button @click="increment">Increment</button>
    <button @click="incrementAsync">Increment Async</button>
  </div>
</template>

<script>
import { mapState, mapActions, mapGetters } from 'vuex'

export default {
  computed: {
    ...mapState(['count', 'doubleCount']),
    ...mapGetters(['doubleCount'])
  },
  methods: {
    ...mapActions(['increment', 'incrementAsync'])
  }
}
</script>