标签: vuejs3

我在watch和vue router的文档中有几乎相同的示例用于组合 API。但console.log即使route.params.gameId在模板中正确显示，也永远不会被触发

<script setup>
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import { useStore } from 'vuex'
const store = useStore()
const route = useRoute()

watch(
      () => route.params.gameId,
      async newId => {
        console.log("watch"+newId)
      }
    )
</script>

<template>
    <div>
        {{route.params.gameId}}
    </div>
</template>

我究竟做错了什么？我还尝试使 watch 函数成为非异步的，但它没有改变任何东西，稍后我将需要它来获取 api，所以它应该是异步的。

我今天开始了一个小型副项目（向经典的贪吃蛇游戏致敬），一切都工作正常，但 VS Code 在 Vue 组件中显示两个错误，并且它似乎使用了过时版本的导入类和组件。

最初我从一个类开始，但后来我添加了一个实际上只公开公共属性（通过 getter 和 setter）和方法的接口。但是使用此类的组件仍然认为该类需要作为参数，并抱怨私有属性在该类型上不可用。

我不确定该错误是来自 VS Code 本身还是来自 Vue3 和 Typescript 推荐的 Volar 扩展。

该代码可作为公共 github 存储库提供： https: //github.com/onyx-blackbird/vue-snake/blob/master/src/components/GameGrid.vue 红色的行是：#23 和 #122写作时。如果我同时更新文件，这里有两行（在这两种情况下，snake 都是 ISnake，并且方法和组件都期望 ISnake）：

const { food, placeFood } = useFood(maxX, maxY, snake);  

<SnakeFigure :snake="snake" :is-game-over="isGameOver"></SnakeFigure>

这里引用的类和接口： https://github.com/onyx-blackbird/vue-snake/blob/master/src/model/Snake.ts

当我尝试修改路由器中的商店时，出现以下错误：

“类型错误：代理上的“设置”：属性“transitionName ”的陷阱返回错误”

商店过渡：

import { defineStore } from "pinia";

interface TransitionState {
  transitionName: string;
}

export const useTransition = defineStore("transition", {
  state: (): TransitionState => ({
    transitionName: "slide-right",
  }),
  actions: {
    changeTransitionName(transitionName: string) {
      this.transitionName = transitionName;
    },
  },
  getters: {
    transitionName: (state: TransitionState) => state.transitionName,
  },
});

路由器：

import Home from "@/views/Home.vue";
import { createRouter, createWebHistory } from "vue-router";
import { useTransition }  from "@/stores/transition";

const router = createRouter({}); 

router.beforeEach((to, from, next) => {
  const …

使用 Google 地图时，AdvancedMarkerView地图上不显示。googleMap仅当存储在组件中时才会出现此问题。当存储googleMap在 const 或 window 对象中时，它工作正常。

我想将其存储在组件中，以便稍后添加或删除标记。我错过了什么还是因为它AdvancedMarkerView是测试版？

mounted() {
    const loader = new Loader({
        apiKey: 'key',
        version: 'beta',
        libraries: ['marker'],
    });

    loader.load().then((google) => {
        this.googleMap = new google.maps.Map(this.$refs.map, this.mapOptions);
        // const googleMap = new google.maps.Map(this.$refs.map, this.mapOptions);
        // window.googleMap = new google.maps.Map(this.$refs.map, this.mapOptions);

        // Marker works fine
        new google.maps.Marker({
            map: this.googleMap,
            position: this.home.position,
        })

        // Works only with window.googleMap or const googleMap
        new google.maps.marker.AdvancedMarkerView({
            map: this.googleMap,
            position: this.home.position,
            content: this.buildContent(this.home),
            title: this.home.title …

我尝试做一件简单的事情：在路线更改时，重新获取数据。

这是我的链接：

<li v-for="category in categories" :key="category.id" class="mb-1">
  <NuxtLink :to="{ query: { cat: category.slug } }">
    {{category.title}}
  </NuxtLink>
</li>

还有我的要求：

<script setup>
const route = useRoute()

const { data:categories } = await useFetch('http://127.0.0.1:8000/api/tasks/category/', {
  key: route.fullPath, 
  initialCache: false
})
const { data:tasks, refresh } = await useFetch(`http://127.0.0.1:8000/api/tasks/?cat=${route.query.cat}`, {
  key: `tasks:${route.query.cat}`, 
  initialCache: false
})

watch(() => route.query.cat, () => refresh())

</script>

因此，点击时，url 会发生很大的变化：

http://localhost:3000/tasks?cat=category1
http://localhost:3000/tasks?cat=category3
http://localhost:3000/tasks?cat=category2

但请求是相同的（来自 Django DRF 后端）：

GET http://127.0.0.1:8000/api/tasks/?cat=category1
GET http://127.0.0.1:8000/api/tasks/?cat=category1
GET http://127.0.0.1:8000/api/tasks/?cat=category1

看起来它保留了第一类，即使initialCache: false

我正在尝试将 auth0 添加到我的 nuxt3 应用程序中，但我在如何处理它时遇到了困难。auth-nuxt 模块仍然不适用于 nuxt3，并且 auth0-spa-js 无法使其与 SSR 一起使用，我遵循了本教程。

import createAuth0Client from "@auth0/auth0-spa-js";

let auth = await createAuth0Client({
  domain: "dev-......com",
  client_id: "Z0...................0T6I",
  redirect_uri: '<MY_CALLBACK_URL>'
});

export default auth;

import auth from "../store/authfile";
export default defineNuxtRouteMiddleware(async (to, from) => {
    let isAuthenticated = await auth.isAuthenticated();
    if (to.path === "/" && !to?.query?.code) {
        return;
    }
    if (!isAuthenticated) {
        const query = to?.query;
        if (query && query.code && query.state) {
            await auth.handleRedirectCallback();
        } else {
            await auth.loginWithRedirect();
        }
    } …

我想做的是在设置完成并且页面安装在组合 API 中后访问方法，但 vue 没有访问该方法

我做错了什么？这是我的代码 -

export default defineComponent({  
  setup() {
    onMounted(() => {
      this.calcStartIndex();
    });
    return {};
  },
  methods: { 
    calcStartIndex() {
      console.log("startIndex");
    }
  },
})

我收到的错误 -

TypeError: Cannot read properties of undefined (reading 'calcStartIndex')

在 Vue3 中，有没有一种方法可以将属性传递给路由，而无需在 url 中显示值？

我这样定义路线：

{
    path: '/someRoute',
    name: 'someRoute',
    component: () => import('@/app/pages/SomeRoute.vue'),
    props: (route) => {
            ...route.params
        }, // <-- I've seen this method in Vue2 but in Vue3 the route.params is just empty here
}

我这样称呼该路线：

<router-link :to="{ name: 'someRoute', params: { message: 'Some Message' } }">Some link</router-link>

当我将路径更改为path: '/someRoute/:message',消息时，效果很好，但我只想传递消息而不将其显示在网址中。

我见过几个使用此方法的 Vue2 示例（例如/sf/answers/3535513061/），但显然它们不再在 Vue3 中工作。

还有 Vue3 文档中的所有示例（https://github.com/vuejs/vue-router/blob/dev/examples/route-props/app.js / https://v3.router.vuejs.org/guide /essentials/passing-props.html）通过 url 本身传递它们的值，所以我不确定它是否还可能。

对此的任何想法都会有所帮助。

我正在尝试将一些函数重写为 VUE 可组合项，在我看来，单个“composable.ts”文件只有一个导出函数可用。这是真的吗？或者有没有办法从单个可组合项导出多个函数？

将新的前端堆栈（Vue3、Tailwind CSS）引入到已经建立的应用程序中。

旧堆栈具有依赖项，其中包括与 Tailwind 冲突的 CSS 类。

最终目标是仅使用Vue 和 TailwindCSS，所以我不想在开发过程中使用前缀，因为它没有必要......但我需要支持旧的和新的堆栈，直到我能够完全删除旧的CSS。

我知道在 TW 配置 ( prefix: 'tw-',) 中使用了 prefix 属性，但这意味着源 .vue 文件将需要使用该前缀。

我是否可以仅在构建期间（使用 Vite）告诉 Vue 向所有类添加前缀，然后同样在构建期间将规则传递给 Tailwind 仅添加前缀（但在开发期间不需要）？

我看到一个类似的问题，其中的答案提到如果TW中存在这种情况，那么TW如何知道哪些要转换，哪些不转换...我理解这一点，但在我的场景中我没有其他插件。

我简单浏览了一下postcss-prefixer，但不确定这是否是我需要的......

我想我可以使用 TW 前缀，因为它不是世界末日，但对我的最终目标来说感觉很脏......