vue状态管理怎么实现
Vue 状态管理实现方法
使用 Vuex（官方推荐）
Vuex 是 Vue 的官方状态管理库，适合中大型应用。
安装 Vuex：
npm install vuex创建 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 的轻量级状态管理库，API 更简洁。
安装 Pinia：
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 {
counter
}
}
}使用 Composition API（小型应用）
对于小型应用，可以直接使用 Vue 3 的 Composition API 管理状态。
创建共享状态：
import { reactive } from 'vue'
export const state = reactive({
count: 0
})在组件中使用：
import { state } from '@/state'
export default {
setup() {
const increment = () => {
state.count++
}
return {
state,
increment
}
}
}使用 Provide/Inject（跨层级组件）
通过 provide 和 inject 实现跨层级组件状态共享。
父组件提供状态：
import { provide, reactive } from 'vue'
export default {
setup() {
const state = reactive({
count: 0
})
provide('sharedState', state)
return { state }
}
}子组件注入状态：
import { inject } from 'vue'
export default {
setup() {
const state = inject('sharedState')
return { state }
}
}选择建议
- 小型应用：Composition API 或 Provide/Inject
- 中大型应用：Vuex 或 Pinia
- Vue 3 项目优先考虑 Pinia
