标签: vuejs3

我不明白为什么我会收到此错误。我试图在组合函数中使用 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 …

使用 CLI 创建了一个简单的 Vue 项目：

vue 创建我的项目

想加两个页面，所以安装了最新版本的vue-router（目前是v3.4.8），按照vue精通教程进行路由。

这是我的 router.js 文件的样子：

import { createWebHistory, createRouter } from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', name: 'Home', component: Home },
    { path: '/about', name: 'About', component: About },
  ]
})

export default router

当然，这就是我的 main.js 文件的样子：

import { createApp } from 'vue'
import router from './router'

createApp({
  template: `
  <div>
    <router-link to='/'>Home</router-link>
    <router-link to='/create'>Create</router-link>
  </div>
  ` …

如何清除控制台中的以下错误：

TypeError: ref.value is null

该错误仅在调整大小事件时出现。每次调整窗口大小时，都会渲染图表。于是错误信息一次又一次的出现。文档显示模板引用也用空值初始化（Source）进行初始化。所以初始化后我必须做一些事情，对吗？

这是我的代码：

<template>
  <canvas
    ref="chartRef"
  />
</template>

<script setup>
// ...
// on resize
export const chartRef = ref(null)
export function createChart () {
  const ctx = chartRef.value.getContext('2d')
  if (ctx !== null) { // fix me
    getDimensions()
    drawChart(ctx)
  }
}
// ...
</script>

如何清理我的控制台以便不再出现错误消息？谢谢。

我只是想在标签中添加一个script块head。

例子

<script>
    alert('hello, world!');
</script>

我花了几个小时来找出解决方案，解决像这样简单的问题。关于添加脚本有很多答案，但没有针对inline脚本的答案blockNuxt 3

我们怎样才能做到这一点Nuxt 3？

在main.js我有这样的事情：

import { myUtilFunc} from './helpers';
Object.defineProperty(Vue.prototype, '$myUtilFunc', { value: myUtilFunc });

通过这种方式，我可以访问myUtilFunc整个应用程序this.$myUtilFunc

但是，setup()如果我无法访问 Vue 3中的方法，我该如何实现this？

我使用 Vue 版本 3 初始化了一个新的空 Vue 应用程序。然后我尝试Vuetify使用命令添加插件vue add vuetify，但收到以下错误。关于如何解决它的任何想法？

有人知道如何在函数中使用mapState或mapGetters使用吗？我知道可以使用带有钩子的商店但是使用这个钩子我们导入所有商店，或者我们可以指定一个：Vue 3setupuseStoremapStatemapGettersmodule

// ...

computed: {
   ...mapGetters('myModule', [
      'myStateVariable'
   ]
) 

//...

我尝试了以下操作： https://github.com/visualfanatic/vue-svg-loader/tree/master

但与 vue-template-compiler 存在版本冲突，因为它在 Vue 2 中使用。

我尝试过： https: //github.com/visualfanatic/vue-svg-loader

但我缺少一个特定的 vue 依赖项。

我注意到使用打字稿有一个警告，您需要声明类型定义文件。但是，我仍然得到“找不到模块 '../../assets/myLogo.svg' 或其相应的类型声明”。

这是我添加的内容：

vue.config.js

module.exports = {
  chainWebpack: (config) => 
  {
    const svgRule = config.module.rule('svg');

    svgRule.uses.clear();

    svgRule
      .use('vue-loader-v16')
      .loader('vue-loader-v16')
      .end()
      .use('vue-svg-loader')
      .loader('vue-svg-loader');
  },
  configureWebpack: process.env.NODE_ENV === 'production' ? {} : {
    devtool: 'source-map'
  },
  publicPath: process.env.NODE_ENV === 'production' ?
    '/PersonalWebsite/' : '/'
}

垫片-svg.d.ts

declare module '*.svg' {
  const content: any;
  export default content;
}

我的组件.vue

<template>
  <div>
     <MyLogo />
  </div>
</template>

<script lang="ts">
import …

Vue2动态组件的简单工作示例

<template>
    <div>
        <h1>O_o</h1>
        <component :is="name"/>
        <button @click="onClick">Click me !</button>
    </div>
</template>

<script>
    export default {
        data: () => ({
            isShow: false
        }),
        computed: {
            name() {
                return this.isShow ? () => import('./DynamicComponent') : '';
            }
        },
        methods: {
            onClick() {
                this.isShow = true;
            }
        },
    }
</script>

一切正常，一切都很棒。我开始尝试它如何与 Composition API 一起使用。

<template>
    <div>
        <h1>O_o</h1>
        <component :is="state.name"/>
        <button @click="onClick">Click me !</button>
    </div>
</template>

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

    export default {
        setup() {
            const state = reactive({
                name: …

我想显示我的资产文件夹中的背景图像。当我使用图像标签时，图像会正确显示，因此图像放置得很好，但当我使用该background-image样式时会抛出 404。知道发生了什么吗？我将 Vue 3 与 TypeScript 和 Vite 2 结合使用。

这不会解析 URL：

<div style="background-image: url(./assets/img/header.png)"
></div>

但这确实：

<img src="./assets/img/header.png" alt="Header" />