标签: vuejs3

我正在尝试使用beforeCreate在main.js. 这段代码在 Vue 3 中的等价物是什么？

new Vue({
  el: '#app',
  router,
  components: { App },
  store: store,
  beforeCreate() { this.$store.commit('initialiseStore');},
  template: '<App/>'
})

vue3+vite2

非常简单的代码如下。
预期：当单击按钮时，更改反应性消息变量。
它在开发（vite）时按预期工作，在构建生产（vite build）和部署后，它似乎无法工作，单击方法无法访问反应式消息变量。
从 vuejs 文档来看，选项 API 可以与组合 API 一起使用。

<template>
  <h1>{{ msg }}</h1>
  <button @click="click">Click</button>
</template>

<script setup>
  const msg = ref('hello')      
</script>

<script>
  import { ref } from 'vue'
  export default {   
    methods: {
      click() {
        this.msg = 'ok'     
      },
    },
  }
</script>

我在 nuxt 组合 API 中使用注入/提供模式。例如，组件 A 注入组件 B 提供的功能，组件 B 是组件 A 的父组件，如下所示。

//Component B 
const test = () => {}
provide('test', test)

//Component A 
const test = inject<Function>('test')

但是，当我想使用组件 A 而不使用组件 B 时，控制台上会显示此警告。我明白它的意思，但在这种情况下它不需要使用“测试”功能。有什么办法可以避免这个警告吗？

[Vue warn]：未找到注入“测试”

placeholder我正在尝试为搜索栏上的属性设置动态文本。根据页面的不同，我希望搜索栏中的文本有所不同（我将在data()).

但是，由于搜索栏组件是全局组件，因此它似乎不可编辑。

（正如您在下面看到的，这是我的尝试，我是v-model根据Vue文档进行的，但是当我尝试使用占位符时，它不起作用......）

代码片段 1 - 搜索栏组件

<template>
    <!-- Search Componenet -->
    <div class="mx-5 mb-3 form-group">
        <br>
        <input class="mb-5 form-control" type="search" :placeholder="placeholderValue" :value="modelValue" @load="$emit('update:placeholderValue', $event.target.value)" @input="$emit('update:modelValue', $event.target.value)" />
    </div>
</template>

<script>
export default {
    props: ['modelValue', 'placeholderValue'],
    emits: ['update:modelValue', 'update:placeholderValue']
}
</script>

片段 2 - Album.vue

<template>
    <div class="AlbumView">
    
        <h1>{{header}}</h1>
        <h2>{{header2}}</h2>
        <br>
    
        <!-- Search Componenet -->
    
        <SearchComponent :placeholder="placeholderValue" v-model="searchQuery" />
    
        <!-- Dynamic Song Route Button -->
        <div class="button-container-all mx-5 pb-5">
    
            <div v-for="item in …

应用程序的主页/基本 URL 可以毫无问题地刷新。但其他页面在页面刷新时返回 404。请问有什么解决办法吗？

这是 404 的屏幕截图。[1]：https ://i.stack.imgur.com/lc8xD.png

我是测试provide and inject方法。我将datas,del-function在父级中提供，我将动态渲染在子级中使用v-for='data' in datas...

我想要实现的目标是：当我del-function在子项中按下“删除按钮”=> 时，然后datas在父项中获取删除的项目，并datas在父项中provide进行更新。

然后孩子开始datas进行视觉更新。v-for重新渲染。 [!!!]

但是当我按下“删除按钮”时，datas更新了，但从视觉上看，没有人被删除。

v-用于渲染卡

// parent vue file 
<template>
  <Reslist/>
</template>

<script>

import Reslist from './components/ResList.vue'

export default {
  name: "App",
  components: {
     Reslist
  },
  provide() {
    return {
      datas: this.datas,
      delData: this.delData,
    };
  },
  data() {
    return {
      datas: [
        {
          id: 1,
          name: "wawa",
          age: "18",
        },
        {
          id: …

首先，我知道这可能是一个超级简单的问题，但我已经挣扎了一个半小时，我已经完成了。有史以来第一个 vue 项目，所以我从来没有让 2 个组件相互通信，更不用说何时<script setup>涉及了。

任何帮助我理解为什么会这样工作的相关文档都会很棒。我想了解这是如何工作的，但我的谷歌搜索一无所获。

这个应用程序很简单，它只是在某些卡上切换浅色模式和深色模式。它的内容比下面的内容更多，但为了便于阅读，我已经删除了不相关的（工作）代码。

我的App.vue代码：

<script setup>
import {ref, defineProps} from "vue";
import card from './components/card.vue'

const darkMode = ref(false);

const props = defineProps({
  darkMode: Boolean
})
</script>

<template>
// Bunch of stuff that is irrelevant to the scope of this problem, it works just fine. 
</template>

我的card.vue代码：

<script xmlns="http://www.w3.org/1999/html">
export default {
  data() {
    return {
      
    }
  },
}
</script>

<template>
  <h1 :class="{ 'text-white': darkMode }"> Content! </h1>
</template>

这个项目更加复杂，但我现在要做的就是让他们谈谈。darkMode我只想根据是否true …

我正在将 vuelidate 与组合 API 一起使用，但我不明白为什么v$.validate()当我放入 inside methods、 aftersetup而不是 inside 时，它​​可以正常工作setup。

所以这有效：

setup() {
  // inspired from 
  // https://vuelidate-next.netlify.app/#alternative-syntax-composition-api
  const state = reactive ({
    // the values of the form that need to pass validation, like:
    name: ''
  })

  const rules = computed (() => {
    return {
      // the validation rules
    }

  const v$ = useVuelidate(rules, state)

  return {
    state,
    v$
  }
},
methods: {
  async submitForm () {
    const result = await …

我正在努力将 sweet Alert 2 作为插件集成到 nuxt3 应用程序中。我正在尝试使用vue-sweetalert2但我在某些时候它定义了全局变量。

// Inside the install function
vue.prototype.$swal = swalFunction;
vue['swal'] = swalFunction;

你能帮我，如何访问这些全局变量吗？文档没有表明这一点。

我想目标是在我的插件中添加如下内容：

import VueSweetalert2 from 'vue-sweetalert2';
import 'sweetalert2/dist/sweetalert2.min.css';

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(VueSweetalert2)

  return {
    provide: {
      swal: swalFunction // <- how to access this ?
    }
  }
})

我正在使用可组合项在 Vue3 中加载图像。我已经能够将所有道具作为一个对象成功传递，请参阅这个问题，但我无法传递我想要反应的一个属性。我相当确定问题在于未定义的属性

// loadImage.js\nimport { onMounted, ref, watch } from \'vue\'\n\n// by convention, composable function names start with "use"\nexport function useLoadImage(src) {\n  let loading = ref(true)\n  let show = ref(false)\n\n  const delayShowImage = () => {\n    setTimeout(() => {\n      show.value = true\n    }, 100)\n  }\n  const loadImage = (src) => {\n    let img = new Image()\n    img.onload = (e) => {\n      loading.value = false\n      img.onload = undefined\n      img.src = undefined\n      img = undefined\n      delayShowImage()\n    }\n    img.src …