当前位置：首页 > VUE

vue状态管理怎么实现

2026-01-07 04:36:51VUE

Vue 状态管理实现方法

使用 Vuex（官方推荐）

Vuex 是 Vue 的官方状态管理库，适合中大型应用。
安装 Vuex：

npm install vuex --save

创建 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: {
    increment({ commit }) {
      commit('increment')
    }
  },
  getters: {
    doubleCount: state => state.count * 2
  }
})

export default store

在组件中使用：

export default {
  computed: {
    count() {
      return this.$store.state.count
    },
    doubleCount() {
      return this.$store.getters.doubleCount
    }
  },
  methods: {
    increment() {
      this.$store.dispatch('increment')
    }
  }
}

使用 Pinia（Vue 3 推荐）

Pinia 是 Vue 3 的轻量级状态管理库，替代 Vuex。
安装 Pinia：

vue状态管理怎么实现

npm install pinia

创建 Store 示例：

import { defineStore } from 'pinia'

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

在组件中使用：

import { useCounterStore } from '@/stores/counter'

export default {
  setup() {
    const counter = useCounterStore()
    return {
      count: computed(() => counter.count),
      doubleCount: computed(() => counter.doubleCount),
      increment: () => counter.increment()
    }
  }
}

使用 Composition API（小型应用）

对于简单场景，可以直接使用 reactive 或 ref 配合 provide/inject 实现状态共享。

vue状态管理怎么实现

示例：

// store.js
import { reactive } from 'vue'

export const state = reactive({
  count: 0,
  increment() {
    this.count++
  }
})

// 父组件
import { provide } from 'vue'
import { state } from './store'

export default {
  setup() {
    provide('sharedState', state)
  }
}

// 子组件
import { inject } from 'vue'

export default {
  setup() {
    const state = inject('sharedState')
    return { state }
  }
}

使用 Event Bus（跨组件通信）

适用于简单事件通信，但不推荐作为主要状态管理方案。

示例：

// eventBus.js
import Vue from 'vue'
export const EventBus = new Vue()

// 组件A
EventBus.$emit('eventName', data)

// 组件B
EventBus.$on('eventName', data => {
  console.log(data)
})