标签: vue-composition-api

我有一个 Select 组件，它接受options. 每个都option可以是任何事物的对象，只要它具有以下属性id并且text

所以我这样输入：

type SelectOption<T> = {
  id: string | number
  text: string
} & T

但我不确定如何在组件中使用defineProps它defineEmits。

defineProps<{
  options: SelectOption<??>
  modelValue: SelectOption<??>
}>()

defineEmits<{
  (event: 'update:modelValue', SelectOption<??>): void
}>()

我不明白为什么我会收到此错误。我试图在组合函数中使用 Vuex 存储，但它不断向我抛出有关注入的错误（我什至没有使用注入）。我的应用程序对后端进行等待 api 调用，如果出现错误，则调用我的组合函数。

[Vue warn]: inject() can only be used inside setup() or functional components.
inject    @ runtime-dom.esm-bundler-9db29fbd.js:6611
useStore  @ vuex.esm-bundler.js:13
useErrorHandling @  useErrorHandling.js:5
checkUserExists  @  auth.js:53

这是我的合成函数

import { useStore } from 'vuex'

function useErrorHandling()
{
    const store = useStore()  // <-- this line

    function showError(errorMessage) {
        console.log(errorMessage)
    }

    return { showError }
}

export default useErrorHandling

如果我删除这一行，那么它就不会抛出该错误

// const store = useStore()  // <-- this line

更新：这就是函数的调用方式。

/**
     * Check if a user exists in database …

当我们使用Options API时，我们可以在section中定义一些属性 computed，在section中定义一些属性data。所有这些都可以通过引用从实例访问this，即在同一个对象中。非常适合。

例如：

if (this.hasMore) {
   this.loading = true;
   ...
}

其中hasMore是计算属性，loading是反应属性。

是否有可能通过Composition API做类似的事情？例如，要实现类似的代码，但其中pagination是一个简单的对象，而不是指向组件的链接，例如：

if (pagination.hasMore) {
   pagination.loading = true;
   ...
}

computed根本不是解决方案，因为它返回并且ref其使用将与this上面示例中的使用完全不同。

如何清除控制台中的以下错误：

TypeError: ref.value is null

该错误仅在调整大小事件时出现。每次调整窗口大小时，都会渲染图表。于是错误信息一次又一次的出现。文档显示模板引用也用空值初始化（Source）进行初始化。所以初始化后我必须做一些事情，对吗？

这是我的代码：

<template>
  <canvas
    ref="chartRef"
  />
</template>

<script setup>
// ...
// on resize
export const chartRef = ref(null)
export function createChart () {
  const ctx = chartRef.value.getContext('2d')
  if (ctx !== null) { // fix me
    getDimensions()
    drawChart(ctx)
  }
}
// ...
</script>

如何清理我的控制台以便不再出现错误消息？谢谢。

在main.js我有这样的事情：

import { myUtilFunc} from './helpers';
Object.defineProperty(Vue.prototype, '$myUtilFunc', { value: myUtilFunc });

通过这种方式，我可以访问myUtilFunc整个应用程序this.$myUtilFunc

但是，setup()如果我无法访问 Vue 3中的方法，我该如何实现this？

MCVE

https://github.com/hyperbotauthor/minvue3cliapp

MCVE 直播

https://codesandbox.io/s/white-browser-fl7ji

我有一个 Vue 3 cli-service 应用程序，它使用带有插槽的组合 API 组件。

该HelloWorld组件渲染它在 a 中接收到的槽div：

// src/components/Helloworld.js
import { defineComponent, h } from "vue";

export default defineComponent({
  setup(props, { slots }) {
    return () => h("div", {}, slots);
  }
});

该组件在其功能中Composite使用并填充其槽：HelloWorldsetup

// src/components/Composite.js
import { defineComponent, h } from "vue";

import HelloWorld from "./HelloWorld";

export default defineComponent({
  setup(props, { slots }) {
    return () =>
      h(HelloWorld, {}, [h("div", {}, ["Div 1"]), h("div", …

我想通过在 Vue 组件中观察 Vuex 状态值来检测它的变化。我目前正在使用 Vue 3 和组合 API。我尝试过以下方法：

setup(props) {
   const store = useStore();

   watch(store.getters.myvalue, function() {
      console.log('value changes detected');
   });

   return {
      myvalue: computed(() => store.getters.myvalue)
   }
},

但改变console.log()时不会被调用。myvalue

我正在用 jest 为 vue.js 中的组合 API 组件编写单元测试。

但是我无法访问组合 API 的 setup() 中的函数。

指标.vue

<template>
  <div class="d-flex flex-column justify-content-center align-content-center">
    <ul class="indicator-menu d-flex justify-content-center">
      <li v-for="step in steps" :key="step">
        <a href="#" @click="updateValue(step)" :class="activeClass(step, current)"> </a>
      </li>
    </ul>
    <div class="indicator-caption d-flex justify-content-center">
      step
      <span> {{ current }}</span>
      from
      <span> {{ steps }}</span>
    </div>
  </div>
</template>

<script lang="ts">
import {createComponent} from '@vue/composition-api';

export default createComponent({
  name: 'Indicator',
  props: {
    steps: {
      type: Number,
      required: true
    },
    current: {
      type: Number,
      required: true
    } …

我想用来onMounted启动第三方库。为此，我需要组件元素作为其上下文。在 Vue 2 中，我会使用它，this.$el但不确定如何使用组合函数来实现。setup有两个参数，没有一个包含元素。

setup(props, context) {
    onMounted(() => {
        interact($el)
            .resizable();
    })
}

是否可以安装 Vue 3，但仍以“Vue 2”方式执行操作？换句话说，我看到 Vue 3 具有新的 Composition API，但这是可选的还是 Vue 3 中必需的处理方式？

出于某种原因，我认为 Vue 3 仍然允许您以 Vue-2 的方式做事，而是使用 Options API。难道不是这样吗？谢谢。