标签: vue-composition-api

我正在尝试使用组合 API 在 Vue 3 组件中输入提示我的道具。

所以，我这样做：

<script lang="ts">
import FlashInterface from '@/interfaces/FlashInterface';
import { ref } from 'vue';
import { useStore } from 'vuex';

export default {
    props: {
        message: {
            type: FlashInterface,
            required: true
        }
    },
    setup(props): Record<string, unknown> {
            // Stuff
        }
};

我的FlashInterface看起来像这样：

export default interface FlashInterface {
    level: string,
    message: string,
    id?: string
}

除了在这种情况下我收到此错误外，此界面运行良好：

ERROR in src/components/Flash.vue:20:10
TS2693: 'FlashInterface' only refers to a type, but is being used as a value here. …

通过选项 API，我们可以使用这些方式来扩展组件。假设我们有 2 个组件。

组件1.vue

<script>
export default {
  methods: {
    init(message) {
      alert(message)
    }
  }
}
</script>

Component2.vue

<script>
    import Component1 from './Component1'
    
    export default {
      extends: Component1,
      methods: {
        showAlert() {
          // we can access Component1 'init()' method here
          this.init('Hello World!')
        }
      },
      mounted() {
        this.showAlert()
      }
    }
</script>

现在，如何让它与组合 API 一起工作？我已经检查过该extends属性在文档中仍然可用，但没有明确的使用说明。

https://v3.vuejs.org/api/options-composition.html#extends

考虑以下带有组合 API 的代码。

组件1.vue

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup () {
    const init = (message) => …

我正在将组件从常规 Vue 3 Composition API 重构为脚本设置语法。初始点：

<script lang="ts">
import { defineComponent, computed } from 'vue';
import { mapGetters } from 'vuex';

export default defineComponent({
  name: 'MyCoolBareComponent',
  computed: {
    ...mapGetters('auth', ['isAdmin']),
  },
});
</script>

当前Vue v3 迁移文档，SFC Composition API Syntax Sugar (<脚本设置>)，链接到此 RFC 页面：https://github.com/vuejs/rfcs/pull/182

使用计算反应性属性只有一个示例：

export const computedMsg = computed(() => props.msg + '!!!')

由于当前没有可用的 Vuex 4 文档提到<scrip setup>，所以我仍然不清楚在使用此语法时应该如何使用？mapGetters或者使用 Vuex 4 解决这个问题的正确方法是什么？

我的“Generateur”组件正在向我的“Visionneuse”组件发送道具。浏览器中一切正常，但我在控制台中看到以下消息：

Set operation on key "texteEnvoye" failed: target is readonly.\n

我真的不知道为什么会收到此消息，因为我将道具传递给了引用。\n这是我的组件：\n“Generateur”

<template>\n  <div>\n    <h1>G\xc3\xa9n\xc3\xa9ration d'une carte de voeux</h1>\n    <div class="board">\n      <Visionneuse :texteEnvoye="texte" :taille="0.5"/>\n    </div>\n    <textarea\n      :style="'width: 60%; resize:none;height: 100px;'"\n      v-model="texte"\n      placeholder="\xc3\x89crivez votre texte ici">\n    </textarea>\n  </div>\n  <div>\n    <button\n      v-if="lien.length == 0"\n      id="boutonObtenirLien"\n      v-bind:class="{ enCours: lienEnCours }"\n      class="btn first"\n      @click="obtenirLien">Obtenir le lien</button>\n    <p\n      v-if="lien.length > 0">\n      Votre carte de voeux est accessible au lien suivant:<br/>\n      <a :href="lien">{{ lien }}</a>\n    </p>\n  </div>\n</template>\n\n<script>\nimport Visionneuse from '@/components/Visionneuse.vue';\n\nimport axios from 'axios';\n\nimport {\n …

我正在使用 Vue.js 版本 3。这是我的完整代码，其中包含虚拟数据和带有过滤器和排序的选项 API，一切都运行良好

<template>
  <h5>List of Products</h5>

        <h3>Filter</h3> 
        <button v-on:click="resetOptions">Reset</button>
        <button v-on:click="sorting">Sorting</button>
        <button v-on:click="sorting2">Sorting2</button>
        <select v-model="category">
            <option value="Accessories">Accessories</option>
            <option value="Laptop">Laptop</option>
            <option value="Stationary">Stationary</option>
        </select> 
        <div>
        <input type="checkbox" name="test" id="test" v-model="city"  value='Roma' /> 
        <label for="test"> Roma</label>
        <input type="checkbox" name="test2" id="test2" v-model.trim="city" value='Barselona'  />
        <label for="test2"> Barselona</label>
        <input type="checkbox" name="test3" id="test3" v-model.trim="city" value='Milano'  />
        <label for="test3"> Milano</label>
        </div>
         <!-- <select v-model="city">
            <option value="Barselona">Barselona</option>
            <option value="Roma"> Roma </option>
            <option value="Milano">Milano</option>
        </select>  -->

        <input type="text" v-model="name" placeholder="Filter By Name"/>

        <label for="vol">Price (between 0 …

我的 Vue SPA 的 linting 存在问题。我正在使用脚本设置语法糖（https://v3.vuejs.org/api/sfc-script-setup.html）中的defineEmits函数。这些错误没有任何意义，有谁知道如何解决这个问题（无需为受影响的文件禁用这些规则，因为它发生在定义Emits的每次使用中）。奇怪的是，defineProps 函数运行时没有错误，它遵循相同的语法。有人可以帮我从这里出去吗？

我的 linter 抱怨这些错误：

22:14  error  Unexpected space between function name and paren       no-spaced-func
22:27  error  Unexpected whitespace between function name and paren  func-call-spacing
23:3   error  'e' is defined but never used                          no-unused-vars
23:27  error  'value' is defined but never used                      no-unused-vars

生成这些错误的代码（defineEmits 是所有错误的来源：

<script lang="ts" setup>
const emit = defineEmits<{
    (e: 'update:modelValue', value: string): void
}>()

defineProps<{
    modelValue: string
    name: string
    items: string[]
}>()

const onInput = (e: Event) => { …

我需要找到一种在我的项目的设置脚本中使用$tof的方法i18nvue

我的 i18n 文件如下所示：

import { createI18n } from 'vue-i18n'\nimport en from './en';\nimport es from './es';\n\nconst messages = { en, es };\n\nconst locales = [\n  { code: 'en', name: 'English' },\n  { code: 'es', name: 'Espa\xc3\xb1ol' }\n];\n\nconst i18n = createI18n({\n  locales: locales,\n  defaultLocale: 'en',\n  fallbackLocale: 'en',\n  messages,\n  silentTranslationWarn: true,\n  silentFallbackWarn: true,\n})\n\nexport default i18n\n

我的主要js看起来像这样：

import i18n from './lang/settings'\nconst application = createApp({ \n            render: () => h(app, props) \n        })\napplication.use(i18n)\n

我可以完美地$t() …

我遇到了 vue3、ts、vue cli 的错误，它说 Module '"c:/Users/USER/Documents/top-secret-project/src/components/Features/Features.vue"' has no default export. 从文件导入组件时我不知道为什么这个特定组件决定现在工作。

这是 Features.vue

<script lang="ts">
import Feature from "./Feature.vue";
</script>

<template>
  <Feature />
</template>

所以我一直在学习 Vue Composition API 并且想知道“watchEffect”和“watch”之间的区别是什么。Watch 说它和 Vue 2 watch 一样，所以我猜 watchEffect 就像 2.0 一样？我想知道是否有任何特定情况下一个比另一个有很大的优势，比如在停止 watchEffect 然后重新激活它而不是在常规手表中使用布尔值的情况下......或者它们只是基本上不同的方式写同样的东西。

谢谢！

参考：

观察效果：https ://vue-composition-api-rfc.netlify.com/api.html#watcheffect

观看：https : //vue-composition-api-rfc.netlify.com/api.html#watch

我正在使用新的 Vue 插件来使用组合 API 和 TypeScript，但有些我不太理解。

我应该如何键入计算属性？

import Vue from 'vue'
import { ref, computed, Ref } from '@vue/composition-api'

export default Vue.extend({
  setup(props, context) {

    const movieName:Ref<string> = ref('Relatos Salvajes')
    const country:Ref<string> = ref('Argentina')

    const nameAndCountry = computed(() => `The movie name is ${movieName.value} from ${country.value}`);

    return { movieName, country, nameAndCountry }
  }
})

在这个简单的例子中，我声明了两个引用和一个计算属性来连接两者。VSC 告诉我计算属性正在返回ReadOnly类型......但我无法让它工作。