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

作者站长头像
站长
· 阅读数 16
watch(() => store.isTranslate, (val) => {
      console.log(val)
      // queryData()
    })

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

回复
1个回答
avatar
test
2024-06-23

写成钩子函数呀，然后要用到地方引入即可: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>
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容