VueJS+Quasar项目中Pinia store内useQuasar()返回undefined如何解决？

方法一：修改Pinia初始化文件（quasar/wrappers/store.js） #

直接在Pinia的插件中注入全局的$q实例，和你之前处理router的方式类似：

import { route, store } from 'quasar/wrappers';
import { createPinia } from 'pinia';
import { markRaw } from 'vue';

export default store(({ app }) => {
  const pinia = createPinia();

  pinia.use(({ store }) => {
    store.router = markRaw(route);
    // 注入Quasar的$q实例到所有store
    store.$q = markRaw(app.config.globalProperties.$q);
  });

  return pinia;
})

之后在你的Gallery Store中，就可以通过this.$q访问Quasar的API：

import { defineStore } from 'pinia';

export const useGalleryStore = defineStore('gallery', {
    actions: {
        test_function() {
            // 现在可以正常使用$q的所有功能
            this.$q.notify({ message: '测试通知' });
            console.log(this.$q.platform, this.$q.screen);
        }
    }
})

方法二：通过Quasar Boot文件注入 #

如果希望逻辑更清晰，可以创建一个专门的boot文件来处理Pinia与Quasar的关联：

1. 在src/boot目录下新建pinia-quasar.js文件：

import { boot } from 'quasar/wrappers';
import { useQuasar } from 'quasar';

export default boot(({ pinia }) => {
  const $q = useQuasar();
  // 给所有Pinia store注入$q
  pinia.use(({ store }) => {
    store.$q = $q;
  });
});

2. 在quasar.config.js中注册这个boot文件：

export default configure(function (/* ctx */) {
  return {
    // ...其他配置
    boot: [
      // ...已有的boot文件
      'pinia-quasar'
    ],
    // ...其他配置
  }
})

3. 同样在Store中通过this.$q使用Quasar功能，和方法一的用法一致。

注意事项 #

• 如果你使用的是Pinia的setup函数式写法，可以直接在setup函数内调用useQuasar()，因为此时已经处于Vue的响应式上下文环境中：

import { defineStore } from 'pinia';
import { useQuasar } from 'quasar';

export const useGalleryStore = defineStore('gallery', () => {
  const $q = useQuasar();

  const testFunction = () => {
    $q.notify({ message: '测试通知' });
    console.log($q.platform);
  };

  return { testFunction };
});

内容的提问来源于stack exchange，提问作者Zain Shabir