Vue 状态管理方案整理

1. Vuex（Vue2/Vue3均支持）

Vuex 是 Vue 官方推荐的集中式状态管理库，适合中大型项目。

核心概念：State、Getter、Mutation、Action、Module

// store.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

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

组件中使用：

this.$store.state.count
this.$store.commit('increment')
this.$store.dispatch('incrementAsync')
this.$store.getters.doubleCount

2. Pinia（Vue3 推荐）

Pinia 是 Vue3 官方推荐的新一代状态管理库，API 更简洁，类型支持更好。

// store/counter.js
import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  getters: {
    doubleCount: (state) => state.count * 2
  },
  actions: {
    increment() { this.count++; }
  }
});

组件中使用：

import { useCounterStore } from '@/store/counter';
const counter = useCounterStore();
counter.increment();
console.log(counter.doubleCount);

3. 简单状态管理（小型项目）

对于简单场景，可以直接用 Vue 的响应式 API 管理状态，无需引入 Vuex/Pinia。

// store.js
import { reactive } from 'vue';
export const state = reactive({ count: 0 });

组件中使用：

import { state } from './store';
state.count++;

总结

Vue2 推荐 Vuex，Vue3 推荐 Pinia。
Pinia 更轻量、类型友好，API 更现代。
小型项目可直接用响应式 API 管理状态，无需专门库。

更多内容可参考