vue3实现vuex

Vue 3 中实现 Vuex 状态管理

Vue 3 中可以通过 Vuex 4（专为 Vue 3 设计）实现状态管理。以下是具体实现步骤。

安装 Vuex 4

通过 npm 或 yarn 安装 Vuex 4：

npm install vuex@next --save
# 或
yarn add vuex@next

创建 Vuex Store

在项目中创建 store 文件（通常为 src/store/index.js）：

import { createStore } from 'vuex';

const store = createStore({
  state() {
    return {
      count: 0
    };
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment');
    }
  },
  getters: {
    doubleCount(state) {
      return state.count * 2;
    }
  }
});

export default store;

在 Vue 应用中引入 Store

在 main.js 中注册 store：

import { createApp } from 'vue';
import App from './App.vue';
import store from './store';

const app = createApp(App);
app.use(store);
app.mount('#app');

在组件中使用 Store

在组件中可以通过 useStore 访问 store：

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

<script>
import { computed } from 'vue';
import { useStore } from 'vuex';

export default {
  setup() {
    const store = useStore();

    const count = computed(() => store.state.count);
    const doubleCount = computed(() => store.getters.doubleCount);

    const increment = () => {
      store.dispatch('increment');
    };

    return {
      count,
      doubleCount,
      increment
    };
  }
};
</script>

模块化 Store

对于大型项目，可以将 store 拆分为模块：

// src/store/modules/user.js
const userModule = {
  namespaced: true,
  state: () => ({
    name: 'John'
  }),
  mutations: {
    setName(state, name) {
      state.name = name;
    }
  }
};

export default userModule;

在 store/index.js 中引入模块：

import userModule from './modules/user';

const store = createStore({
  modules: {
    user: userModule
  }
});

在组件中使用模块化 store：

const name = computed(() => store.state.user.name);
const setName = (name) => {
  store.commit('user/setName', name);
};

使用 Composition API 封装 Store

可以封装 store 的逻辑以便复用：

// src/composables/useCounter.js
import { computed } from 'vue';
import { useStore } from 'vuex';

export function useCounter() {
  const store = useStore();

  const count = computed(() => store.state.count);
  const doubleCount = computed(() => store.getters.doubleCount);

  const increment = () => {
    store.dispatch('increment');
  };

  return {
    count,
    doubleCount,
    increment
  };
}

在组件中使用：

import { useCounter } from '@/composables/useCounter';

export default {
  setup() {
    const { count, doubleCount, increment } = useCounter();

    return {
      count,
      doubleCount,
      increment
    };
  }
};

通过以上方法，可以在 Vue 3 中高效地使用 Vuex 进行状态管理。