Блог

Я использую vue3 с api композиции, но когда я создаю свой проект, элемент ref всегда не определен.

Я воспроизвел его, может быть, я использовал его неправильно, но я не знаю, почему.

1. Я определил ссылку в функции крючков.

 const isShow = ref(false)
const rootRef = ref<HTMLDivElement>();

export default function () {
  function changeShow() {
    isShow.value = !isShow.value;
    console.log(isShow.value, rootRef.value);
  }
  return { isShow, rootRef, changeShow };
}
 

2. Используйте rootRef в HelloWorld.vue связанном элементе и.

 <script setup lang="ts">
import useShow from "../composables/useShow";

const { rootRef, isShow } = useShow();
</script>

<template>
  <div ref="rootRef" v-show="isShow" class="test"></div>
</template>
 

3. Создайте кнопку App.vue и свяжите функцию щелчка.

 <script setup lang="ts">
import HelloWorld from "./components/HelloWorld.vue";
import useShow from "./composables/useShow";

const { changeShow } = useShow();
</script>

<template>
  <button @click="changeShow">切换</button>

  <HelloWorld />
</template>
 

Когда я нажимаю кнопку, это работает.

Но когда я создаю его и импортирую из библиотеки, он не работает.

Мое vite.config.ts заключается в следующем:

 export default defineConfig({
  plugins: [vue()],

  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src")
    }
  },

  build: {
    cssCodeSplit: true,
    sourcemap: true,
    lib: {
      entry: path.resolve(__dirname, "src/index.ts"),
      name: "my-project",
      fileName: format => `my-project.${format}.js`
    },
    rollupOptions: {
      external: ["vue"],
      preserveEntrySignatures: "strict",
      output: {
        globals: {
          vue: "Vue"
        }
      }
    }
  }
});
 

Я думаю, что проблема заключается в определении rootRef . Похоже, что только привязка местоположения может его использовать. Это ничем не отличается от определения его в компоненте. Мне нужно использовать его в нескольких местах.

Как ни странно, таким образом, среда разработки работает нормально, но Pro env недоступен. Нужно ли мне изменять конфигурацию сборки vite.

Как мне это сделать?

Проблема в том, что вы App.vue используете свою собственную копию composables/useShow вместо копии из библиотеки.

Решение состоит в том, чтобы экспортировать составную часть из библиотеки, чтобы ваше приложение могло использовать ту же самую:

 // src/index.ts
import { default as useShow } from './composables/useShow';

//...

export default {
  //...
  useShow
};
 

В App.vue , используйте составную библиотеку библиотеки:

 import MyProject from "../dist/my-project.es";

const { changeShow } = MyProject.useShow();
 

GitHub PR