标签: vuejs3

我正在尝试有一个 getter 来返回我的 pinia 商店的所有状态属性。

export const useFilterStore = defineStore('filterStore', {
    state : () : FilterState => ({
        variables:[] as string[],
        categories:[] as string[]
    }),


    getters: {
        getFilters: (state) => state
    },
    actions : {}
  });

通过这种方式，getFilters 引用自身，在不同情况下生成循环引用，如本组件所示

import { useFilterStore } from './store/filter-store.js'
export default {
  name: 'App',

  setup() {
    const filter = useFilterStore()
    JSON.stringify(filter.getFilters)  --> cyclic object value
  }
}

有没有办法直接为整个状态对象设置一个getter？

我想在 Vue 3 中声明一个全局变量，任何组件（以及 main.js 本身）都可以随时更改该变量，并且应该是响应式的。

我的 main.js 文件：

const app = createApp(App);

app.config.globalProperties.$myGlobalVariable = {
   content: 'not updated'
};

// simulating something async as an HTTP call
setTimeout(() => {
  app.config.globalProperties.$myGlobalVariable.content = 'updated';
  console.log(app.config.globalProperties.$myGlobalVariable.content); // updated
}, 2000);

app.mount('#app');

我的组件文件：

<script>
   export default {
      created() {
         setTimeout(() => {
            console.log(this.$myGlobalVariable.content)// updated
         }, 3000);
      }
   }
</script>
<template>
  <main>
    <p>{{ $myGlobalVariable.content }}</p>
  </main>
</template>

在我的组件（p元素）内部，我只看到not updated，尽管我的组件的函数setTimeout内部created()证明它已经改变。$myGlobalVariable.content如何获取元素内部更改的值p？

是否可以仅使用 javascript（作为对象）而不是在模板中使用 vue、vue-i18n？

在 src/boot/i18n.js 中

import { boot } from 'quasar/wrappers'
import { createI18n } from 'vue-i18n'
import messages from 'src/i18n'

export default boot(({ app }) => {
  const i18n = createI18n({
    locale: 'es-CO',
    fallbackLocale: 'en-US',
    globalInjection: true,
    messages
  })

  // Set i18n instance on app
  app.use(i18n)
})

但我创建了一个 src/support/errors 和 utils，以及更多扩展文件，我需要插入消息但可以访问 i18n。

在此输入图像描述

我是西班牙人，是 quasar vue 的初级学生，所以请帮助我

谢谢。

我需要 VueJS 组件中的路由参数。例如中的42example.de/page/42。

// router
// ...
    {
      path: '/pages/:id',
      name: 'pages',
      component: () => import('../views/PageView.vue'),

    },  
// ...

// PageView.vue
<script setup>
    import { onMounted } from "vue";
    import { ref } from 'vue';

    onMounted(async () => {
      console.log(  $route.params.id );
   }

这里我得到错误： Uncaught (in promise) ReferenceError: $route is not defined。

但在组件的模板中，{{ $route.params.id }}可以进行访问。但我在剧本中需要它。我究竟做错了什么？

我正在使用最新版本的 Vuelidate 和 Vue 3。有没有办法为内置验证器全局设置错误消息？我在文档中看到这一部分，它说要withMessage在辅助对象上使用该函数，如下所示：

import { required, helpers } from '@vuelidate/validators'

const validations = {
  name: {
    required: helpers.withMessage('This field cannot be empty', required)
  }
}

但这看起来像是每次我们构建规则对象时都需要设置。

我见过这个： Get element height with Vuejs 但根据我的理解，功能组件没有这个关键字。如何获取 vue.js 中 HTML 元素的高度？我来自 React 背景，只会在那里使用 refs，但 vue 中的 refs 似乎不一样。任何想法？

如何使用FormKit（使用 Vue3）进行异步/服务器端验证？不仅在提交时，而且在用户从输入中移除焦点之后。

基本验证示例：

<FormKit
  type="text"
  label="Number"
  validation="required|number|between:20,50"
  validation-visibility="live"
  help="Enter a number between 20 and 50."
/>

除了文档提到一次异步之外，在任何地方都找不到任何示例或提及。