标签: vuejs3

我有一个 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
}>()

升级到 vue 3 后：
yarn add vue@next

我收到此错误：“无法找到模块 '@vue/compiler-sfc/package.json” 执行 yarn electron:serve

(base) marco@pc01:~/webMatters/electronMatters/GGC-Electron$ yarn add vue@next
yarn add v1.22.5
warning ../package.json: No license field
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@2.1.3: The platform "linux" is incompatible with this module.
info "fsevents@2.1.3" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@1.2.13: The platform "linux" is incompatible with this module.
info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] …

在撰写本文时，Vue 3.0 已经发布了第一个稳定的v3.0.0 'One Piece' 版本，Vuex 4 处于v4.0.0-beta.4 中。

不幸的是，目前还没有关于如何在 TypeScript 中使用 Vuex 4 模块的官方示例......

作为进一步的要求，我希望在它们自己的文件中存储模块状态、突变、getter 和操作。这使得在这些模块增长时更容易管理代码。

我设法在Github和Codesandbox 中拼凑了一个工作示例存储库。

通过使用这些资源中提供的示例：

• Vuex + TypeScript by Andrew 在 Dev.to
• 要点贾维斯佩雷斯/index.ts
• 回购 andrewvasilchuk/vuex-typescript
• Vue 3 和 Vuex 4：在 Dev.to 中由 Barylski 组合的 useStoreModule
• LogRocket 在 Vuex 中映射的完整指南

但是，仍有一些问题有待解决：

1. 解决依赖循环 linting 错误

目前，模块的index.ts、actions.ts和getters.ts中的类型依赖于RootState从主商店导入。

当使用ESLint Airbnb linting config 时，我遇到了 …

最近学习 Vue.js 后，我对如何编写 vue 组件语法感到非常困惑，我一直在看 YouTube 教程和文章，每个人都使用不同的方法。

就 vue 3 而言，我们应该使用导出默认值来创建组件还是导出默认定义组件或 new Vue({

那么如何决定如何创建应用程序组件及其其余子组件和页面等的正确方法..

希望我的问题足够清楚。

谢谢

当您在组件的“props:”键下注释 props 时，Vue 已经可以推断 props 的类型，这很好。

但是 vue 类型中是否有一个“实用类型”可以从给定组件中提取 props 的类型？

假设我有一个使用 DefineComponent 定义的组件，并且组件声明有一个 props 键，它正确定义了 props 的名称和类型。我想要一个像这样工作的实用程序类型：

let someting: PropType<MyComponent> = {...};

Vue 打字稿类型包含许多类似的实用程序类型，但我找不到执行此操作的东西。

有人知道如何在 Vue 3 中添加全局变量吗？

在 Vue 2 中，我们在main.js文件中使用它：

Vue.prototype.$myGlobalVariable = globalVariable

我不明白为什么我会收到此错误。我试图在组合函数中使用 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上面示例中的使用完全不同。

所以我有Component1，

<!-- Component1 -->
<script lang="ts" setup>
defineProps<{ msg: string }>()
</script>

<template>
  <p>{{ msg }}</p>
</template>

然后我在全球范围内注册它，

// main.ts
import { createApp } from "vue"
import App from "./App.vue"
import Component1 from "./Component1.vue"

const app = createApp(App)
app.component("Component1", Component1)
app.mount("#app")

之后我用它作为，

<script setup lang="ts"></script>

<template>
  <Component1 />
</template>

但是我没有得到 的 props 的类型推断Component1。那么如何为这个全局组件添加打字稿支持呢？

有没有办法阻止 Vue3 中单字视图名称的 ESLint错误？

每次运行 ESLint 时，我都会收到以下消息：

  1:1  error  Component name "About" should always be multi-word  vue/multi-word-component-names\n

我目前有这样的设置：

文件结构：

\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 index.html\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 node_modules\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 npm\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 package.json\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 package-lock.json\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 public\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 favicon.ico\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 README.md\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 src\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 App.vue\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 assets\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 logo.svg\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 components\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 Menu.vue\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 env.d.ts\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 main.ts\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 router\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 index.ts\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 views\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 About.vue\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 Home.vue\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 tsconfig.json\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 vite.config.ts\n

.eslintrc：

\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 index.html\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 node_modules\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 npm\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 package.json\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 package-lock.json\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 public\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 favicon.ico\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 README.md\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 src\n\xe2\x94\x82\xc2\xa0\xc2\xa0 …