当前位置：首页 > VUE

store的实现方法vue

2026-02-23 20:53:24VUE

使用 Vuex 实现 Store

Vuex 是 Vue.js 的官方状态管理库，适用于管理全局共享状态。

安装 Vuex

npm install vuex --save

创建 Store

// store/index.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) {
      return state.count * 2
    }
  }
})

在 Vue 应用中引入 Store

// main.js
import Vue from 'vue'
import App from './App.vue'
import store from './store'

new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

在组件中使用 Store

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double Count: {{ doubleCount }}</p>
    <button @click="increment">Increment</button>
    <button @click="incrementAsync">Increment Async</button>
  </div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.state.count
    },
    doubleCount() {
      return this.$store.getters.doubleCount
    }
  },
  methods: {
    increment() {
      this.$store.commit('increment')
    },
    incrementAsync() {
      this.$store.dispatch('incrementAsync')
    }
  }
}
</script>

使用 Pinia 实现 Store

Pinia 是 Vue 的轻量级状态管理库，适用于 Vue 2 和 Vue 3。

安装 Pinia

npm install pinia

创建 Store

// stores/counter.js
import { defineStore } from 'pinia'

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

在 Vue 应用中引入 Pinia

// 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')

在组件中使用 Pinia

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double Count: {{ doubleCount }}</p>
    <button @click="increment">Increment</button>
    <button @click="incrementAsync">Increment Async</button>
  </div>
</template>

<script>
import { useCounterStore } from '@/stores/counter'

export default {
  setup() {
    const counterStore = useCounterStore()

    return {
      count: counterStore.count,
      doubleCount: counterStore.doubleCount,
      increment: counterStore.increment,
      incrementAsync: counterStore.incrementAsync
    }
  }
}
</script>

使用 Composition API 实现简易 Store

适用于小型应用，无需额外库。

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

const state = reactive({
  count: 0
})

const mutations = {
  increment() {
    state.count++
  }
}

const actions = {
  incrementAsync() {
    setTimeout(() => {
      mutations.increment()
    }, 1000)
  }
}

const getters = {
  doubleCount() {
    return state.count * 2
  }
}

export default {
  state: readonly(state),
  mutations,
  actions,
  getters
}

在组件中使用

<template>
  <div>
    <p>Count: {{ state.count }}</p>
    <p>Double Count: {{ doubleCount }}</p>
    <button @click="increment">Increment</button>
    <button @click="incrementAsync">Increment Async</button>
  </div>
</template>

<script>
import store from './store.js'

export default {
  setup() {
    const { state, mutations, actions, getters } = store

    return {
      state,
      doubleCount: getters.doubleCount(),
      increment: mutations.increment,
      incrementAsync: actions.incrementAsync
    }
  }
}
</script>