vue实现store
Vue 中实现 Store 的几种方法
在 Vue 中实现状态管理（Store）有多种方式，以下是常见的几种方法：
使用 Vuex（官方推荐的状态管理库）
Vuex 是 Vue 的官方状态管理库，专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态。
安装 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在 main.js 中注入 store：
import Vue from 'vue'
import store from './store'
new Vue({
store,
// ...其他选项
})使用 Vue 的响应式系统（小型应用适用）
对于小型应用，可以直接使用 Vue 的响应式系统创建简单的 store 模式：
// store.js
export const store = {
state: Vue.observable({
count: 0
}),
increment() {
this.state.count++
}
}
// 在组件中使用
import { store } from './store'
export default {
computed: {
count() {
return store.state.count
}
},
methods: {
increment() {
store.increment()
}
}
}使用 Pinia（Vuex 的替代方案）
Pinia 是 Vue 的轻量级状态管理库，API 设计更简单，TypeScript 支持更好：
安装 Pinia：
npm install pinia创建 store：
// stores/counter.js
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', {
state: () => ({
count: 0
}),
actions: {
increment() {
this.count++
}
},
getters: {
doubleCount: (state) => state.count * 2
}
})在 main.js 中设置：
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
const app = createApp(App)
app.use(createPinia())
app.mount('#app')在组件中使用：
import { useCounterStore } from '@/stores/counter'
export default {
setup() {
const counter = useCounterStore()
return {
counter,
count: computed(() => counter.count),
doubleCount: computed(() => counter.doubleCount)
}
}
}使用 Composition API 实现 Store
Vue 3 的 Composition API 可以轻松创建响应式 store：
// store.js
import { reactive, readonly } from 'vue'
const state = reactive({
count: 0
})
const methods = {
increment() {
state.count++
}
}
export default {
state: readonly(state),
...methods
}在组件中使用：
import store from './store'
export default {
setup() {
return {
count: computed(() => store.state.count),
increment: store.increment
}
}
}选择建议
- 小型应用：使用 Vue 的响应式系统或 Composition API
- 中型应用：考虑使用 Pinia
- 大型复杂应用：Vuex 或 Pinia 都是不错的选择
- 需要良好 TypeScript 支持：优先选择 Pinia
每种方法都有其适用场景，应根据项目规模和复杂度选择最合适的方案。
