标签: vue-composition-api

我正在尝试 vueJs 3 中的组合 api。不幸的是我不知道如何在 setup() 中包含我安装的代码。当我将代码放入设置中时，JavaScript 会尝试访问尚未渲染的 DOM。谁能告诉我如何重写这个？

选项 api 风格（有效）

<script>
export default {
    name: "NavBar",
    data() {
        return {};
    },
    methods: {},
    mounted() {
        const bm = document.querySelector('#toggle');
        const menu = document.querySelectorAll('nav ul li');
        const overlay = document.querySelector('#overlay');

        // ...
        bm.addEventListener('click', () => {  
            bm.classList.toggle("active");
            overlay.classList.toggle("open");
        })
 
    },
}
</script>
<template>
    <header>
        <div class="button_container" id="toggle">
          <span class="top"></span>
          <span class="middle"></span>
          <span class="bottom"></span>
        </div>
        <div class="overlay" id="overlay">
          <nav class="overlay-menu">
            <ul>
            <li><a href="#home">Home</a></li>
            <!-- ... -->
            </ul>
          </nav>
        </div>      
    </header> …

我想知道我应该如何在 vuejs 设置中重置反应？（我知道如果将其更改为 ref 并使用 view.value 将解决此问题，但使用反应式应该有一个答案）

我从父组件发送一个道具：user。现在，在子组件中，我想复制它而不改变 prop 的值。

我尝试这样做：

export default defineComponent({
  props: {
    apiUser: {
      required: true,
      type: Object
    }
  },
  setup(props) {
    const user = ref(props.apiUser);

    return { user };
  }
});

但是，如果我更改用户对象的值，它也会更改 apiUser 属性。我想也许使用Object.assign会起作用，但随后裁判不再有反应。

在 Vue 2.0 中我会这样做：

export default defineComponent({
  props: {
    apiUser: {
      required: true,
      type: Object
    }
  },
  setup(props) {
    const user = ref(props.apiUser);

    return { user };
  }
});

感谢 @buttons 的评论，得出了答案。

const user = reactive({ ...props.apiUser });

我正在尝试确定我的 Nuxt 应用程序 (2.14.0) 是使用 Vue 2 还是 Vue 3，但我不知道。我已经潜入node_modules并查看了我的锁定文件，但不能确定。我认为它只使用了 Vue 2——特别是vue "^2.6.12——基于我在锁定文件中所能知道的。

有谁知道 Nuxt 在 2.14.0 版本中使用的是哪个版本的 Vue？我尝试通读此问题以更好地了解 Vue 3 何时/是否已在 Nuxt.js 中引入和公开发布，但听起来 Vue 3 并未包含在任何 Nuxt.js 版本中。

在定义自定义事件时， Vue 鼓励我们通过以下emits选项在组件上定义发出的事件：

app.component('custom-form', {
  emits: ['inFocus', 'submit']
})

使用 Vue 3 的组合 API，当一个独立的组合函数发出自定义事件时，是否可以在组合函数中定义这些？

我想创建搜索页面，单击其按钮后将重定向到另一个页面。而这个页面将会是这样的

http://localhost:8080/search?q=foo

我的路由器index.js看起来像这样

const routers = [
  {
    path: '/search',
    name: 'Search',
    component: SearchPage,
    props: route => ( { query: route.query.q } )
  }
]

问题是如何SearchPage在 Vue.js 3 中获取目标页面中的查询值？这个答案仍然让我感到困惑，因为没有使用组合 API 并且不在 vuejs 3 中

TypeScript 新手。我正在尝试设置状态但收到此错误。

错误：'string' only refers to a type, but is being used as a value here.

const state = reactive({
    user: {
        uid: "",
        provider: string[],
    }
});

const user = auth.currentUser;
if (user != null) {
    state.user.uid = user.uid || "";
    user.providerData.forEach(function(profile) {
        state.user.provider.push({
            providerId: profile.providerId,
            uid: profile.uid,
        })
    });
}

尝试在具有组合 API 的组件中实现 vue-i18n。我希望能够在 onMounted 挂钩内设置一些翻译消息。在选项 api 中，我会使用this.$i18n.setLocaleMessage(locale, messages).

但是，this在组合 API 的 Setup() 方法中不可用。因此，当我尝试上述操作时，它给了我未定义的信息。我可以通过将 i18n 导入到组件中来做到这一点： import { useI18n } from 'vue-i18n'然后创建它的一个实例var i18n = useI18n({}), i18n.setLocaleMessage()，但我更喜欢像第一个这样的单行解决方案。

根据官方文档，

defineProps和编译器宏只能defineEmits在. 它们不需要导入，并且在处理时被编译掉。<script setup><script setup>

<!-- HelloWorld.vue -->
<template>
  <h1>{{ props.message }}</h1>
</template>

<script setup>
// import { defineProps } from 'vue';
const props = defineProps({
  message: {
    type: String,
    required: true,
  }
});
</script>