标签: vuejs3

我有一个用 Vue 编写的简单应用程序。我想要的只是在 Vue.createApp() 方法之外调用 Vue 中的一个自定义方法。

我的代码：

const app = Vue.createApp({
data() {
    return {
        data: ["this","is","an", "example"],
    }
 },
 methods: {
  getData() {
    return this.data;
  },
 },
});


app.mount('#app');

// This instruction fails!
console.log(app.getData());

当我尝试执行最后一行的方法时，我进入控制台：

Uncaught TypeError: Cannot read property 'content' of undefined

为什么我无法执行该方法？怎么了？

我创建了一个由两个主要组件组成的小应用程序，我使用 vue 路由器在组件之间进行路由。

第一个组件称为 MoviesList，第二个组件称为 Movie。我已将它们注册到routes js 文件中。

const routes = [
  {
    path: '/',
    name: 'Home',
    component: MoviesList
  },

  {
    path: '/:movieId',
    name: 'Movie',
    component: Movie
  }
  
]

我的 App.vue 模板如下所示

<template>
   <router-view></router-view>
</template>

如何使 MovieList 组件缓存起来，或者说它是用<keep-alive>标签包裹的？期望的结果是缓存 MovieList 组件，而不缓存 Movie 组件。

我想这样做，因为 MovieList 组件有一个在 Mounted() 钩子上运行的方法，每当我切换路由并返回时，该方法都会再次运行，因为组件被重新渲染。

从 'axios' 导入 axios；

结果导致投掷

未捕获的语法错误：找不到导入：默认值

import { createApp } from 'vue';
import TheContainer from './components/TheContainer.vue';
import axios from 'axios';

axios.defaults.baseURL = process.env.VUE_APP_API_URL;

const app = createApp({
    components: {
        TheContainer
    }
})
app.axios = axios;
app.$http = axios;
app.config.globalProperties.axios = axios;
app.config.globalProperties.$http = axios;
app.mount('#app');

这是使用 axios 0.21.1 和 vue 3.0.5

试图找出问题所在...vuejs v3 Cookbook 遗憾地使用通过 CDN 调用 axios 0.14 代码

当 prop 更新时如何调用函数？

父容器：

<div>     
  <Maintable :type="typeRef" :country="countryRef" />
</div>

子容器：

    export default{

    props: ['type'],
    
    setup(props)
    {   
        watch(props.type, () => {
            console.log('hello')
        })
    }

此代码收到错误：无效的监视源...我如何侦听道具的更新？

希望有人可以帮助我！:-)

我正在尝试使用 Vite 和 TypeScript 在 npm 上的公共包中导出两个 Web 组件。

Vite 有一个图书馆模式，效果很好。ESM 和 UMD 文件都被转换到我的/dist目录中。我的问题是如何导出入口点文件中的 Web 组件。

我有一个名为的入口点文件export.js

import AwesomeHeader from './components/AwesomeHeader.vue'
import AwesomeFooter from './components/AwesomeFooter.vue'

export default { // I feel like the problem is here.
    components: {
        AwesomeHeader: AwesomeHeader,
        AwesomeFooter: AwesomeFooter,
    }
}

我的想法是，我将npm publish这个项目并像这样使用它。

npm i @sparkyspider/awesome-components #(ficticious example)

import {AwesomeHeader, AwesomeFooter} from '@sparkyspider/awesome-components' // does not find

（即使引用/找到了 JavaScript 文件，在 node_module 中也未找到 AwesomeHeader 和 AwesomeFooter 作为导出）

我的 package.json 下面：

{ …

根据这篇文章，我想导入组件以动态查看我的 Vue 3 应用程序。视图的代码如下所示：

<template>
  <div class="page">
      <latest-box v-if="showLatestBox" />
  </div>
</template>


<script>
// @ is an alias to /src
// This works well. 
//import LatestBox from '@/components/LatestBox.vue'


export default {
    name: 'Page 1',

    data() {
        return {
            showLatestBox: true,
        }
    },

    components: {
        LatestBox: () => import('@/components/LatestBox.vue')  // This does not work
    }
}
</script>

代码不会引发任何错误，但我在页面上看不到该组件。如果我使用第一个导入样式，它就可以工作。我错过了什么吗？

我们有一个使用 Typescript 和 Vue 3.1.5 以及 Vue CLI 5.0.0-beta.2 的项目，而 Vue CLI 5.0.0-beta.2 又使用 Webpack 5.47.0。对于开发来说，启动vue-cli-service serve非常慢（有很多依赖项）。所以我们激活了 Webpack 文件系统缓存：

configureWebpack: {
  cache: {
    type: "filesystem",
  },
},

现在它在 Linux 和 MacOS 上运行良好。但在 Windows 上，它通常会在记录异常后刷新整个缓存：

[webpack.cache.PackFileCacheStrategy] 从 C:\Users\Smith\ws\kl\kl-frontend\node_modules.cache\webpack\default-development.pack 恢复包失败：TypeError：无法读取未定义的属性“hasStartTime”

有谁知道问题可能是什么？也许与文件名有关？我们还有一项工作，删除然后重新创建一些 API 文件，通常内容相同。这可以摆脱缓存吗？

这段代码可以工作，但我是 Vue.js 的新手，我忍不住认为有一种更简洁的方法可以做到这一点。

我特别指的是在进入和更新（商店状态）时设置数据的部分，以防它是您访问（或重新加载）的第一页。我有一个商店，在网站加载时从后端获取数据，但这可能是显而易见的。

this.getTodo();当我从watch和打电话时，我只是觉得我在重复自己mounted。

<template>
  <div>
    <h2>Details Page</h2>
    {{ title }}
    {{ content }}
    {{ lastEditTime }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: '',
      content: '',
      lastEditTime: ''
    }
  },
  methods: {
    getTodo () {
      if (this.$store.state.list.length > 0) {
        const id = this.$route.params.id;
        const todoItem = this.$store.getters.getItem(id);
        Object.assign(this, todoItem);
      }
    }
  },
  watch: {
    '$store.state.list': {
      handler() {
        this.getTodo();
      }
    } 
  },
  mounted () {
    this.getTodo();
  }
} …

变量以空引用开始，例如它可能是以下之一：

const myString = ref();
const myString = ref('');
const myString = ref<string>();
const myString = ref<string | null>();
const myString = ref<string | null>(null);
const myString = ref<string | undefined>();
const myString = ref<string | undefined>(undefined);
const myString = ref<string | null | undefined>();

然后它被赋予一个值：

myString.value = "I am a string";

然后再次为ref 分配一个空值，例如它可能是以下之一：

myString.value = '';
myString.value = null;
myString.value = undefined;

这些的哪种组合最适合在 Vue 3 中使用？

或者也许你会做别的事？

当在野外使用时，我正在寻找与 Vue 3 的最大兼容性、TypeScript 类型安全性以及没有 Eslint 错误。

我正在将应用程序从 vue 2 升级到 vue 3，但在可组合项方面遇到了一些问题。我想在可组合项中使用道具，但它似乎不起作用。代码示例是从工作组件中提取的，当我将其留在组件中时，它可以正常工作。

我认为defineProps可组合项不支持，但我不清楚如何处理它。当我传递src参数时，它会失去反应性。

// loadImage.js
import { defineProps, onMounted, ref, watch } from 'vue'

// by convention, composable function names start with "use"
export function useLoadImage() {
  let loadingImage = ref(true)
  let showImage = ref(false)
  const props = defineProps({
    src: String,
  })
  const delayShowImage = () => {
    setTimeout(() => {
      showImage.value = true
    }, 100)
  }
  const loadImage = (src) => {
    let img = new Image()
    img.onload = (e) => …