vue3中mixins替代方案

news2025/1/7 22:31:20

使用自定义 Hooks（Composables）

自定义 Hooks 是一种基于函数的代码复用方式，可以在 setup 函数中使用。它允许将组件的逻辑分割成更小的、可复用的部分。

useCounter.js

//useCounter.js
import { ref, onMounted } from 'vue';

export function useCounter() {
  const count = ref(0);

  const increment = () => {
    count.value++;
  };

  onMounted(() => {
    console.log('Counter initialized');
  });

  return { count, increment };
}

<!--MyComponent.vue-->
<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script setup>
import { useCounter } from './useCounter';

const { count, increment } = useCounter();
</script>

使用全局 Composition API 函数

如果逻辑需要在多个组件之间共享，可以创建全局的 Composition API 函数，并在需要的地方导入和使用

//globalComposables.js

import { ref } from 'vue';

export function useGlobalLogic() {
  const globalData = ref('Global data');

  return { globalData };
}

<!--MyComponent.vue-->
<template>
  <div>
    <p>{{ globalData }}</p>
  </div>
</template>

<script setup>
import { useGlobalLogic } from './globalComposables';

const { globalData } = useGlobalLogic();
</script>

使用 Vuex 或 Pinia 进行状态管理

如果应用需要全局状态管理，Vuex 或 Pinia 是更好的选择。它们提供了更强大的状态管理功能，包括状态持久化、模块化和调试工具等
Vuex 示例：

//store.js
import { createStore } from 'vuex';

export default createStore({
  state: {
    counter: 0
  },
  mutations: {
    increment(state) {
      state.counter++;
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment');
    }
  },
  getters: {
    counter: state => state.counter
  }
});

<!--MyComponent.vue-->
<template>
  <div>
    <p>{{ counter }}</p>
    <button @click="incrementCounter">Increment</button>
  </div>
</template>

<script setup>
import { useStore } from 'vuex';

// 使用 Vuex store
const store = useStore();

// 从 store 中获取状态
const counter = computed(() => store.state.counter);

// 定义一个方法来调用 store 中的 action
const incrementCounter = () => {
  store.dispatch('increment');
};
</script>

Pinia 示例：

//store.js

import { defineStore } from 'pinia';

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

<!--MyComponent.vue-->

<template>
  <div>
    <p>{{ counter }}</p>
    <button @click="incrementCounter">Increment</button>
  </div>
</template>

<script setup>
import { computed } from 'vue';
import { useCounterStore } from './store';

// 使用 Pinia store
const counterStore = useCounterStore();

// 从 store 中获取状态
const counter = computed(() => counterStore.counter);

// 定义一个方法来调用 store 中的 action
const incrementCounter = () => {
  counterStore.increment();
};
</script>