标签: quasar-framework

我的 Quasar 应用程序中遇到了有关浏览器刷新和 Firebase 身份验证的问题。

在用户登录并点击浏览器刷新后，firebase.auth().currentUser 返回 null（因为它是异步执行的）。这意味着当 beforeEach 被执行时，currentUser 为空并且用户被提示登录页面。但是我看到当 onAuthStateChanged 的​​回调被调用时，用户被正确设置。

在 Quasar 应用程序中，是否有任何模式可以在导航过程中使用 onAuthStateChanged 以便重用现有用户会话？

// Vue-router => index.js

firebase.auth().onAuthStateChanged(user => {
  console.log('onAuthStateChanged Invoked => ' + user);
});

router.beforeEach((to, from, next) => {
  let currentUser = firebase.auth().currentUser; 
  let requiresAuth = to.matched.some(record => record.meta.requiresAuth);

  if (requiresAuth && !currentUser) {
    next('signin');
  } else {
    if (requiresAuth && currentUser.emailVerified === false) {
      next('signin');
    } else {
      next();
    }
  }
});

我一直在iOS上苦苦挣扎，想在Android上轻松工作：让我的PWA在有新版本时自动更新。我完全不确定在iOS上是否有可能。我已经使用vue.js和Quasar来构建我的应用程序，并且一切在Android上都是开箱即用的。这是当前iOS版本上的情况（难看，糟糕）：

1. 我可以检查自己的服务器的版本，并将其与存储在我的应用程序（在indexedDB中）中的当前服务器进行比较，并发出一个通知，指出有一个新版本。到目前为止，一切都很好。
2. 除了让用户手动清除SAFARI CACHE（!!）之外，我无法弄清楚如何从应用程序内以编程方式清除PWA缓存或以其他方式强制上载。

所以在这一点上，我想我的问题是：

1. 有新版本可用时，是否有人可以在iOS（11.3或更高版本）上获取PWA来自动更新？
2. 有没有办法从我的PWA中清除（Safari）应用程序缓存？

显然，要通知用户要进行更新，他们必须在应用程序外部执行几个步骤才能对其进行刷新，这是一种令人难以置信的糟糕用户体验，但是除非没有我遗漏的东西，否则这似乎是iOS当前所处的位置。有人在任何地方进行过这项工作吗？

我正在努力弄清楚我做错了什么才能让 TypeScript 理解它props.user的类型UserInterface，任何建议或指针都会很棒

vue@3.1.1、typescript@4.2.2、quasar@2.0.0-rc.3。这感觉更像是原生 VueJS 或 TypeScript 问题，而不是与 Quasar 有任何关系

参考用户界面：

export default interface UserInterface {
  id: number,
  email: string,
  name: string,
  agent_id: string
}

成分：

<template>
  <q-avatar :color="color" :text-color="textColor" :size="size" :title="user.name" style="outline: 2px solid #ffffff">
    {{ initials(user.name) }}
  </q-avatar>
</template>

<script lang="ts">
import UserInterface from 'logic/interfaces/UserInterface'
import {computed, defineComponent, PropType} from 'vue'

const colors: Record<string, string> = {
  A: 'blue',
  K: 'black',
  R: 'purple',
  S: 'primary'
}

export default defineComponent({
  name: 'UserIcon',
  props: {
    user: …

我使用 Quasar 框架开发了一个 PWA。我没有更改 service-worker 或清单文件中的任何内容，只是使用默认值。我在面向云前端发行版的 AWS S3 上托管了构建。当我在 S3 上推送更新的版本并使云前端分发缓存无效时。通过浏览器打开网站的用户会获得更新的版本。但安装了 PWA 的用户永远不会获得更新，除非他们在浏览器中再次打开网站。我计划每隔一天更新一次更改。每当我推送更改时，安装的 PWA 都会立即更新的最佳方式是什么？

我正在尝试从 Vue/Quasar 项目中的 package.json 获取“版本”。

网上有一个信息可以使用这个代码：

import { version } from '../package.json'

现在我是一个初学者，我无法运行这个。我当前的代码看起来有点像这样：

<template>
  // ... REMOVED CODE FOR BETTER READABILITY

  <q-layout view="lHh Lpr lFf">
    <q-page-container>
      <div>VERSION: {{ version }}</div>
      <router-view />
    </q-page-container>
  </q-layout>
</template>

<script>
import { version } from '../package.json'
export default {
  name: 'Layout',

  data () {
    return {
      leftDrawerOpen: false
    }
  },
  components: {
    version
  }
}
</script>

ESLint 抛出以下错误：

87:5 错误 “版本”组件已注册但未使用 vue/no-unused-components

如何正确使用我导入的组件变量？

我正在使用 Quasar 并尝试设置q-table第一列的样式：

<style lang="scss" scoped>
td:first-child {
  background-color: #747480 !important;
}
</style>

然而，即使在重新加载/热重新加载/重新启动服务器之后，这也不起作用。

删除作用域效果很好。我不知道发生了什么事。任何人都可以提供这个问题的解决方案吗？

编辑：这是工作演示：

代码沙箱

只需从样式中删除范围，颜色就会改变。

我一直在尝试使用 Tailwind 来自定义 Quasar 组件，但是 Quasar CSS 已经覆盖了 Tailwind CSS 的大部分内容。

我向我的 Tailwind 类添加了一个前缀，tailwind.config.js其前缀为 tw- ，如下例所示。

module.exports = {
  prefix: 'tw-',
}

我试图在 vue3 中使用 jest 和 quasar 进行单元测试，但出现以下错误

失败测试/T1/views/xyz.spec.ts\n\xe2\x97\x8f 测试套件运行失败

类型错误：无法读取未定义的属性（读取“暗”）

我在类星体中使用深色和浅色模式来更改屏幕的背景颜色\n但出现错误dark\n请帮助我

我正在使用 Quasar v2，使用 Vue Composition API 和 vue-i18n，我希望网站标题在活动语言更改时更改显示（通过下拉菜单），但无论我尝试什么都不会导致标题语言被改变。有任何想法吗？

以下是我现在所拥有的（只是必需品）：

import { defineComponent, ref, computed } from 'vue';
import { useMeta } from 'quasar';

export default defineComponent({
  setup () {
    const { t: translate } = useI18n() as any;

    const siteTitle = computed(() => translate('title.app') as string);

    const pageMetadata = {
      title: 'untitled',
      titleTemplate: (title: string) => `${title} - ${siteTitle.value}`
    };
    useMeta(pageMetadata);
  }
});

我用来切换语言的代码：

async onChangeLanguage () {
  try {
    let locale = this.language;
    if (this.language === 'en') {
      locale …

尝试了此链接并使用 Pinia 在 Quasar 创建了我的第一个商店，我还需要手动更改.quasar/app.js以添加 Pinia 商店并使 Pinia 正常运行。

import { Quasar } from 'quasar'
import { markRaw } from 'vue'
import RootComponent from 'app/src/App.vue'

import createStore from 'app/src/stores/index'
import createRouter from 'app/src/router/index'

export default async function (createAppFn, quasarUserOptions) {
  // Create the app instance.
  // Here we inject into it the Quasar UI, the router & possibly the store.
  const app = createAppFn(RootComponent)
  app.config.devtools = true
  

  app.use(Quasar, quasarUserOptions)

    const store = typeof createStore === 'function' …