vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vuex详解

一篇文章让你彻底搞懂vuex

作者：likuolei

Vuex是一个Vue的状态管理工具,状态就是数据,用大白话来说就是Vuex是一个插件,可以帮我们管理Vue通用的数据,这篇文章主要介绍了彻底搞懂vuex的相关资料,需要的朋友可以参考下

前言

以下是针对“Vuex详解”的一篇万字级全面教程（实际字数约6000+），基于2025–2026年Vue.js开发视角。Vuex是Vue.js的经典状态管理库，虽然Vue 3+官方推荐Pinia作为替代，但Vuex在大量遗留项目和中大型应用中仍广泛使用（Vuex 4兼容Vue 3）。我会从基础概念入手，逐步深入到高级用法、源码简析、最佳实践、面试高频，以及与Pinia的对比。内容实用、带代码示例、表格对比，适合初学者到中高级开发者。

如果你是Vue 2用户，从“一、二”部分看起；Vue 3用户，注意“三”中的兼容点；想迁移Pinia，看“八”。如果需要代码仓库或特定版本差异，直接回复我。

一、Vuex是什么？为什么需要它？（核心概念）

1.1 Vuex的定义

Vuex是一个专为Vue.js应用设计的状态管理模式 + 库，它采用集中式存储管理应用的所有组件的状态（State），并以相应的规则保证状态以可预测的方式发生变化。

1.2 为什么用Vuex？（问题解决）

在Vue中，组件间通信常见痛点：

Vuex解决：

不适合场景：小项目（用ref/reactive + provide/inject）；纯静态页。

1.3 Vuex核心模块（五大件）

Vuex Store = State + Mutations + Actions + Getters + Modules

模块作用同步/异步调用方式
State存储状态数据—this.$store.state.xxx
Mutations修改State的唯一方式（同步）同步commit(‘mutationName’)
Actions处理异步逻辑，提交Mutations异步dispatch(‘actionName’)
Getters计算属性（派生状态）—this.$store.getters.xxx
Modules模块化拆分Store（命名空间）—按模块访问

数据流图（文本版）：

Actions (异步) → Mutations (同步修改State) → State → Getters (计算) → View (渲染)
↑ 用户交互/事件

二、安装 & 基本使用（Vue 3视角）

2.1 安装Vuex（2026推荐）

2.2 创建Store

// store/index.js
import { createStore } from 'vuex';

export default createStore({
  state: {
    count: 0,
    user: { name: 'Grok' }
  },
  mutations: {
    increment(state) {
      state.count++;
    },
    setUser(state, payload) {
      state.user.name = payload;
    }
  },
  actions: {
    asyncIncrement({ commit }) {  // context对象
      return new Promise(resolve => {
        setTimeout(() => {
          commit('increment');
          resolve();
        }, 1000);
      });
    }
  },
  getters: {
    doubleCount: state => state.count * 2,
    fullName: (state, getters) => `${state.user.name} (double: ${getters.doubleCount})`
  }
});

2.3 在Vue中挂载 & 使用

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import store from './store';

createApp(App).use(store).mount('#app');

组件中使用：

<template>
  <div>
    <p>Count: {{ count }}</p>  <!-- 响应式 -->
    <p>Double: {{ doubleCount }}</p>
    <button @click="increment">+1</button>
    <button @click="asyncIncrement">Async +1</button>
  </div>
</template>

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

export default {
  computed: {
    ...mapState(['count']),  // 简写state.count
    ...mapGetters(['doubleCount'])
  },
  methods: {
    ...mapMutations(['increment']),  // this.increment() → commit
    ...mapActions(['asyncIncrement'])  // this.asyncIncrement() → dispatch
  }
}
</script>

辅助函数（mapXXX）：简化访问，推荐在computed/methods中使用。

2.4 严格模式（Strict Mode）

三、Vue 3兼容 & Composition API用法

Vuex 4支持Vue 3的setup：

<script setup>
import { useStore } from 'vuex';
import { computed } from 'vue';

const store = useStore();

const count = computed(() => store.state.count);
const doubleCount = computed(() => store.getters.doubleCount);

const increment = () => store.commit('increment');
const asyncIncrement = () => store.dispatch('asyncIncrement');
</script>

关键：Vue 3中，Vuex的响应式基于Vue的Reactivity，但Pinia更原生支持setup（无this）。

四、进阶：Modules模块化（大型项目必备）

大Store拆分成Modules，避免单一文件臃肿。

// store/index.js
import userModule from './modules/user';

export default createStore({
  modules: {
    user: userModule  // 模块名
  }
});

// modules/user.js
export default {
  namespaced: true,  // 开启命名空间（推荐，避免冲突）
  state: { name: 'Grok' },
  mutations: { setName(state, payload) { state.name = payload; } },
  actions: { asyncSetName({ commit }, payload) { commit('setName', payload); } },
  getters: { upperName: state => state.name.toUpperCase() }
};

访问：

最佳实践：每个功能一个模块（如user、cart、auth），始终开启namespaced。

五、Actions & Mutations深入（异步 & 参数）

5.1 Mutations：同步纯函数

5.2 Actions：异步容器

actions: {
  async fetchUser({ commit }) {
    const res = await fetch('/api/user');
    const data = await res.json();
    commit('setUser', data);
  }
}

5.3 组合Actions

actions: {
  actionA({ dispatch }) { return dispatch('actionB'); },
  actionB() { /* ... */ }
}

六、Getters & 插件（计算 & 扩展）

6.1 Getters：Store的computed

6.2 插件（Plugins）

const myPlugin = store => {
  store.subscribe((mutation, state) => {
    console.log(`Mutation: ${mutation.type}, Payload: ${mutation.payload}, New State: ${state}`);
  });
};

// 使用
createStore({ plugins: [myPlugin] });

热门插件（2026仍活跃）：

七、源码简析 & 性能优化（高级）

7.1 核心源码逻辑

7.2 性能优化

7.3 常见坑

八、Vuex vs Pinia对比（2026迁移指南）

方面VuexPinia迁移建议
设计Mutations/Actions分离统一Actions（同步/异步混用）Pinia更简
APIthis.$storedefineStore + setup风格Vue3首选
模块化Modules + namespaced每个Store独立文件易拆分
类型支持一般（需插件）原生TSTS项目迁
体积较大更轻（无Mutations）小项目迁
Devtools支持更好（时间旅行）—
官方推荐Vue2默认，Vue3兼容Vue3官方状态管理新项目Pinia

迁移步骤：

  1. 安装Pinia：npm i pinia
  2. 创建Store：defineStore('user', { state: () => ({ name: '' }), actions: { setName() {} } })
  3. 用useUserStore()替换$store
  4. Mutations → Actions，Getters不变。

九、最佳实践 & 面试高频（生产Checklist）

9.1 最佳实践

  1. 小State：只存全局共享数据，局部用组件state。
  2. 常量化类型：用const INCREMENT = ‘increment’ 防拼写错。
  3. 异步全Actions：API、定时器等。
  4. 模块化从开始：项目一上来就拆Modules。
  5. 测试：用vuex-test-utils测试Mutations/Actions。
  6. 持久化：敏感数据用vuex-persistedstate + encryption。
  7. 监控：集成Sentry日志异常State。

9.2 面试高频题（2025–2026）

  1. Vuex数据流？（State→View→Actions→Mutations→State）
  2. Mutations为什么必须同步？（可预测、易调试）
  3. Actions返回Promise怎么用？（dispatch.then()）
  4. mapState/mapGetters怎么工作？（返回computed对象）
  5. Vuex在Vue3的痛点？（this依赖，Pinia无）
  6. 如何实现State持久化？（插件subscribe + localStorage）
  7. Modules命名空间的作用？（防冲突，模块隔离）

9.3 扩展资源

这篇详解让你从0到1彻底搞懂Vuex。如果你想深入某个模块（如Actions异步链式、TS支持）、或对比Redux/Pinia的代码，直接告诉我！

到此这篇关于vuex的文章就介绍到这了,更多相关vuex详解内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文