vue3怎么写类似vue2中混入的代码？

Question

watch(() => store.isTranslate, (val) => {
      console.log(val)
      // queryData()
    })

背景：
当isTranslate的值改变之后，调用页面的queryData方法，但是这段代码我要在多个vue页面中用，vue2写一个mixin.js直接mixin注入到当前页面就可以，vue3有啥办法

Answer 1

写成钩子函数呀，然后要用到地方引入即可:
useTranslateWatch.js:

import { ref, watch } from 'vue';

export default function useTranslateWatch(isTranslateRef, queryData) {
  // 假设isTranslateRef是从store中导出的ref或reactive对象属性
  watch(isTranslateRef, (val) => {
    console.log(val);
    // 当isTranslate的值改变时调用queryData方法
    queryData();
  });
}

要用到的地方:

<script setup>
import { ref } from 'vue';
import { useStore } from 'vuex'; // 假设你正在使用Vuex
import useTranslateWatch from '@/composables/useTranslateWatch';

const store = useStore();

// 假设isTranslate是store中的state
const isTranslate = ref(store.state.isTranslate);

// 这是你的queryData方法
function queryData() {
  // ...你的查询逻辑
}

// 使用自定义的Composition函数
useTranslateWatch(isTranslate, queryData);
</script>

Answer 2

建议把这个代码放到 store 里面，然后在多个组件里共用这个数据。会比组件 watch 然后更新更好。

比如 store.ts：

export const useStore = defineStore('store', () => {
  const isTranslated = ref<boolean>(false);
  const effectedData = ref<SomeData[]>([]);
  function setIsTranslated(value: boolean): void {
    isTranslated.value = value;
  }
  watch(isTranslated, () => {
    // load effected data
  });

  return {
    isTranslated,
    effectedData,
    setIsTranslated,
  };
});

某个组件 comp.vue

<script lang="ts" setup>
const store = useStore();

function toggleIsTranslated(): void {
  store.setIsTranslated(store.isTranslated);
}
</script>

<template>
<div class="formatted-data">{{store.effectedData}}</div>
<button
  type="button"
  @click="toggleIsTranslated"
>Toggle</button>
</template>