当前位置：首页 > VUE

vue实现简单的store

2026-01-20 05:53:19VUE

Vue 实现简单的 Store

在 Vue 中可以通过多种方式实现简单的状态管理（Store），以下介绍几种常见方法：

使用 Vue 的响应式 API

通过 reactive 或 ref 创建响应式对象，实现一个轻量级 Store：

import { reactive } from 'vue';

// 创建 store
const store = reactive({
  count: 0,
  increment() {
    this.count++;
  }
});

// 在组件中使用
export default {
  setup() {
    return { store };
  }
}

使用 provide/inject 跨组件共享

适合小型应用或组件层级较深的场景：

// 父组件提供 store
import { provide, reactive } from 'vue';

const store = reactive({ count: 0 });
provide('store', store);

// 子组件注入使用
import { inject } from 'vue';

const store = inject('store');

基于 Vuex 的简化实现

如果需要更结构化的状态管理，可以模仿 Vuex 的简化模式：

import { reactive } from 'vue';

function createStore() {
  const state = reactive({
    count: 0
  });

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

  return {
    state,
    commit(mutation) {
      mutations[mutation](state);
    }
  };
}

export const store = createStore();

使用 Pinia（推荐）

对于现代 Vue 3 项目，Pinia 是官方推荐的状态管理方案：

// store/counter.js
import { defineStore } from 'pinia';

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

// 组件中使用
import { useCounterStore } from './stores/counter';

const counter = useCounterStore();
counter.increment();

每种方法适用于不同场景，小型项目可使用响应式 API 或 provide/inject，中大型项目推荐使用 Pinia。

vue实现简单的store