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

Question

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

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

Answer 1

建议把这个代码放到 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>

Answer 2

写成钩子函数呀，然后要用到地方引入即可:
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'; // 假设你正在使用Vueximport useTranslateWatch from '@/composables/useTranslateWatch';const store = useStore();// 假设isTranslate是store中的stateconst isTranslate = ref(store.state.isTranslate);// 这是你的queryData方法function queryData() {  // ...你的查询逻辑}// 使用自定义的Composition函数useTranslateWatch(isTranslate, queryData);</script>