Vue3 Vuex 入门实战：手写迷你 Vuex 解析状态管理原理

3. 注册 Store 到 Vue 应用

在项目入口 src/main.js 中注册，让所有组件能访问 Store：

import { createApp } from 'vue'
import App from './App.vue'
import store from './store'
const app = createApp(App)
app.use(store) // 注册 Vuex
app.mount('#app')

4. 组件中使用 Vuex

新建 src/components/Count.vue，通过 useStore 获取 Store，用计算属性读取 state，用 commit 触发 mutation 修改数据：

<template>
  <div @click="add">点击累加：{{ count }}</div>
</template>
<script setup>
import { computed } from 'vue'
import { useStore } from 'vuex'

// 获取 Store 实例
const store = useStore()

// 读取共享数据（计算属性保证响应式）
const count = computed(() => store.state.count)

// 触发 mutation 修改数据（不能直接修改 store.state.count）
function add() {
  store.commit('add')
}
</script>

四、手写迷你 Vuex：理解底层原理

Vuex 的核心原理其实很简单：响应式数据 + 依赖注入 + 规范化修改规则。我们用 30 行代码实现一个迷你版 Vuex。

1. 实现核心逻辑（src/store/gvuex.js）

import { inject, reactive } from 'vue'

// 依赖注入的唯一标识
const STORE_KEY = '__store__'

// 供组件获取 Store 实例的方法
export function useStore() {
  return inject(STORE_KEY)
}

// 创建 Store 实例的方法
export function createStore(options) {
  return new Store(options)
}

class Store {
  constructor(options) {
    this.$options = options
    // 用 reactive 包裹 state，让数据响应式
    this._state = reactive({ data: options.state() })
    // 存储 mutation 方法
    this._mutations = options.mutations
  }

  // 对外暴露 state（只读）
  get state() {
    return this._state.data
  }

  // 触发 mutation 的方法
  commit = (type, payload) => {
    const mutation = this._mutations[type]
    mutation && mutation(this.state, payload)
  }

  // 供 app.use(store) 调用的安装方法（依赖注入）
  install(app) {
    app.provide(STORE_KEY, this)
  }
}

2. 替换官方 Vuex 使用迷你版

修改 src/store/index.js，替换为手写的 gvuex：

// import { createStore } from 'vuex'
import { createStore } from './gvuex'

const store = createStore({
  state() {
    return { count: 666 }
  },
  mutations: {
    add(state) {
      state.count++
    }
  }
})
export default store

此时组件中使用 useStore、commit 的方式和官方 Vuex 完全一致，核心原理已复刻！

五、Vuex 进阶：Getters 和 Actions

1. Getters：Vuex 的'计算属性'

Getters 用于对 state 做派生计算（类似组件的 computed），比如实现 count 的双倍值：

// src/store/index.js
const store = createStore({
  state() {
    return { count: 666 }
  },
  getters: {
    double(state) {
      return state.count * 2
    }
  },
  mutations: {
    add(state) {
      state.count++
    }
  }
})

组件中使用：

const double = computed(() => store.getters.double)

2. Actions：处理异步修改

Vuex 规定 mutation 只能做同步操作，异步逻辑（如接口请求、延时）需放在 actions 中，再通过 commit 触发 mutation：

// src/store/index.js
const store = createStore({
  // ...其他配置
  actions: {
    // 异步累加（模拟 1 秒后修改）
    asyncAdd({ commit }) {
      setTimeout(() => {
        commit('add')
      }, 1000)
    }
  }
})

组件中通过 dispatch 触发 action：

function asyncAdd() {
  store.dispatch('asyncAdd')
}

六、Vuex 核心设计思想：数据流向

Vuex 的核心是'单向数据流'，保证数据修改可追溯：

1. 组件通过 dispatch 触发 action（异步）或直接 commit 触发 mutation（同步）；
2. mutation 是修改 state 的唯一入口，同步修改 state；
3. state 更新后，组件通过计算属性读取最新值，视图自动更新。

七、下一代 Vuex：Pinia

Vuex 对 TypeScript 的类型推导支持不够友好，因此 Vuex 作者推出了 Pinia（被称为'Vuex5'）：

• 天生支持 TypeScript，类型推断更友好；
• 无需嵌套模块，API 更简洁；
• 完美兼容 Vue Devtools；
• 可作为 Vuex 的替代方案，学习成本低。

八、总结

1. 核心原则：私有数据用 ref/reactive，共享数据用 Vuex；
2. 核心概念：
   • state：存储共享数据；
   • mutation：同步修改 state（唯一入口）；
   • getters：派生计算 state；
   • action：处理异步，内部调用 mutation；
3. 底层原理：响应式数据（reactive） + 依赖注入（provide/inject） + 规范化修改规则；
4. 进阶选型：TypeScript 项目优先考虑 Pinia。

思考题

你的项目中哪些数据适合放在 Vuex 中管理？比如：

• 用户登录状态、用户名、权限；
• 全局主题、布局配置；
• 购物车数据、全局计数器；
• 多页面共享的筛选条件、分页信息。