标签: vue-composition-api

使用 Vue 3 组合 API，如何返回属性的计算值firstDigit？this计算属性中的关键字是，undefined但是当我省略时this，我会收到错误fourDigits is not defined。

<script setup>
import { computed, reactive } from 'vue'

const input = reactive({
    fourDigits: Array(1,2,3,4),
    firstDigit: computed(() => {
      return this.fourDigits[0] <===== `this` is undefined but if I leave `this` out, then `fourDigits` is undefined.
    })
</script>

<template>
   <div>
     <pre>
       {{JSON.stringify(input.firstDigit, null, 2)}}
     </pre>
   </div>
</template>

我在watch和vue router的文档中有几乎相同的示例用于组合 API。但console.log即使route.params.gameId在模板中正确显示，也永远不会被触发

<script setup>
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import { useStore } from 'vuex'
const store = useStore()
const route = useRoute()

watch(
      () => route.params.gameId,
      async newId => {
        console.log("watch"+newId)
      }
    )
</script>

<template>
    <div>
        {{route.params.gameId}}
    </div>
</template>

我究竟做错了什么？我还尝试使 watch 函数成为非异步的，但它没有改变任何东西，稍后我将需要它来获取 api，所以它应该是异步的。

在Vue2中，我可以使用this.$route.path

在Vue3中，我可以使用useRouter()

但在 Vue2.7 组合 api 中，这两个我都不能使用。

我想做的是在设置完成并且页面安装在组合 API 中后访问方法，但 vue 没有访问该方法

我做错了什么？这是我的代码 -

export default defineComponent({  
  setup() {
    onMounted(() => {
      this.calcStartIndex();
    });
    return {};
  },
  methods: { 
    calcStartIndex() {
      console.log("startIndex");
    }
  },
})

我收到的错误 -

TypeError: Cannot read properties of undefined (reading 'calcStartIndex')

在玩 Vue 3 反应性时，我遇到了一种我无法解释的行为。

我创建了一个ref原语。检查isRef一下，显然返回了true。但是当作为 a 传递给子组件时prop，isRef()也会isReactive()返回false。为什么 ？

另外，即使它们都返回false，如果值发生变化，我在子组件中添加的这个道具的观察者也会被触发。如果监视的值不是refor ，它如何触发reactive？

这是父级和子级的代码片段：

家长.vue

let foo = ref(0);
function changeFoo() {
  foo.value++;
}
  
console.log("parent check is reactive?", isReactive(foo)); // retruns false
console.log("parent check is ref?", isRef(foo)); // retruns true

watch(foo, (value, oldValue) => {
  console.log("foo changing from", oldValue, "to ", value);
});

儿童.vue

const props = defineProps<{
  foo: number;
}>();

console.log("child check …

我收到此错误并注意到已加载

Uncaught (in promise) TypeError: t is undefined
    Ye vue-leaflet.es.js:46
    setup vue-leaflet.es.js:1205
    callWithErrorHandling runtime-core.esm-bundler.js:155
    callWithAsyncErrorHandling runtime-core.esm-bundler.js:164
    __weh runtime-core.esm-bundler.js:2684
    flushPostFlushCbs runtime-core.esm-bundler.js:341
    flushJobs runtime-core.esm-bundler.js:395
    promise callback*queueFlush runtime-core.esm-bundler.js:280
    queuePostFlushCb runtime-core.esm-bundler.js:302
    queueEffectWithSuspense runtime-core.esm-bundler.js:1576
    scheduler runtime-core.esm-bundler.js:1798
    triggerEffect reactivity.esm-bundler.js:394
    triggerEffects reactivity.esm-bundler.js:384
    triggerRefValue reactivity.esm-bundler.js:1000
    node_modules chunk-LQ5UJQYN.js:1429
    triggerEffect reactivity.esm-bundler.js:394
    triggerEffects reactivity.esm-bundler.js:379
    triggerRefValue reactivity.esm-bundler.js:1000
    node_modules chunk-LQ5UJQYN.js:1429
    triggerEffect reactivity.esm-bundler.js:394
    triggerEffects reactivity.esm-bundler.js:379
    triggerRefValue reactivity.esm-bundler.js:1000
    set value reactivity.esm-bundler.js:1045
    finalizeNavigation vue-router.mjs:3324
    pushWithRedirect vue-router.mjs:3197
    promise callback*pushWithRedirect vue-router.mjs:3164
    push vue-router.mjs:3089
    install vue-router.mjs:3520
    use runtime-core.esm-bundler.js:4349
    <anonymous> main.ts:10
.
.
.
.

我的代码是这样的

                    <div class="map">
                        <l-map ref="map" …

我正在使用 Nuxt 3 和 Vue 3。我有一个默认布局的目录结构，我想将其应用于包括该error.vue页面在内的所有页面。

注意：该error.vue文件位于项目的根目录中。

我的目录结构如下：

project-application
  - /assets/
      - /styles/
          - errorStyles.scss
  - /components/
  - /composables/
  - /layouts/
      - default.vue
  - /pages/
      - index.vue
      - /course/
          - [id].vue
  - /public/
  - /server/
  - /utils/
  - /app.vue
  - /error.vue
  - /nuxt.config.ts
  - package.json
  - ...

目前，这些内容default.vue已应用于我的pages文件夹中的所有内容。

问题：如何将我的default.vue布局应用到我的布局 error.vue（位于项目根文件夹中）。

app.vue文件

project-application
  - /assets/
      - /styles/
          - errorStyles.scss
  - /components/
  - /composables/
  - /layouts/
      - default.vue
  - /pages/ …

我正在尝试将@vue/apollo-composable与我的 Nuxt-Ts 应用程序一起使用。这是如何将它注入到“普通”Vue 应用程序的根实例中的示例：

import { provide } from '@vue/composition-api'
import { DefaultApolloClient } from '@vue/apollo-composable'

const app = new Vue({
  setup () {
    provide(DefaultApolloClient, apolloClient)
  },

  render: h => h(App),
})

问题：我不知道如何访问Nuxt-TS 中的根实例。

我尝试制作一个插件，但它直接注入到根实例中（这是不对的，因为@vue/apollo-composable使用composition-api::provide()which 创建了它自己的属性_provided。

如果我使用 nuxt 插件，则会inject将$get 连接起来。如果我_provided直接写一个对象通过ctx.app._provided =它不会粘住。

import { DefaultApolloClient } from "@vue/apollo-composable";
const myPlugin: Plugin = (context, inject) => {
  const defaultClient = ctx.app.apolloProvider.defaultClient;
  inject(DefaultApolloClient.toString(), defaultClient) …

考虑以下代码：

export default defineComponent({
  setup() {
    const miniState = ref(true)

    const setMiniState = (state: boolean, screenWidth: number) => {
      if (screenWidth > 1023) {
        miniState.value = false
      } else if (state !== void 0) {
        miniState.value = state === true
      }
      else {
        miniState.value = true
      }
    }

    watch('$q.screen.width', (width) => setMiniState(true, width))

    return { miniState, setMiniState }
  }
})

TypeScript 抛出此错误：

TS2769：没有与此调用匹配的重载。
重载 1 of 3, '(来源: SimpleEffect, options?: Pick, "deep" | "flush"> | undefined): StopHandle'，出现以下错误。类型“$q.screen.width”的参数不可分配给类型“SimpleEffect”的参数。

重载第 2 个（共 …

我正在尝试ref使用vue-composition API. 但是，我不知道为什么这些项目没有添加到数组中。也许我以错误的方式使用了扩展运算符，或者我的实现是错误的但没有添加项目。

vue-composition 方法位于不同的文件中，并在整个组件中使用。

我以这种方式将道具传递给产品组件：

 <product
    :id="12345667"
    title="Pampers 9x Sensitive Baby Wet Wipes Filler, 576 Diaper Wipes"
    price="14.59"
    :rating="4"
    image="https://images-na.ssl-images-amazon.com/images/I/41Yo4bc2uiL._AC_US160_.jpg"
  >
  </product>

同样，产品组件setup如下：

   <template>

    <div class="product">
          <button type="button" @click="addToCart(item)">Add to Basket</button>
    </div>

   </template>

   <script>
    import { useCart } from "../js/ShoppingCart";
    
    export default {
      setup(props) {
        let item = props;
    
        const { addToCart } = useCart();
    
        return { item, addToCart };
      },
      props: {
        id: Number,
        title: String,
        image: String,
        price: String,
        rating: Number, …