当前位置：首页 > VUE

vue实现store

2026-03-27 07:18:46VUE

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 模式：

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：

vue实现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
    }
  }
}