为什么在类星体引导文件中调用"useUserStore(store)"会破坏 Pinia Persistedstate 插件？

Question

我正试图在我的Quasar应用程序(Vue 3/TypeScript(中使用Pinia持久化状态插件。

开箱即用，一切正常。

但是，当使用Quasar启动文件时，持久状态将停止工作。刷新页面会擦除所有新值。

我不知道为什么启动文件破坏了持久状态插件，但我已经将罪魁祸首缩小到一行。。。

这就是我如何与Quasar一起使用Pinia并添加插件：

src/store/index.ts

/* eslint-disable @typescript-eslint/no-unused-vars */
import { store } from 'quasar/wrappers';
import { createPinia, Pinia } from 'pinia';
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
declare module '@quasar/app' {
interface BootFileParams<TState> {
store: Pinia;
}
interface PreFetchOptions<TState> {
store: Pinia;
}
}
declare module '@vue/runtime-core' {
interface ComponentCustomProperties {
$store: import('pinia').Pinia;
}
}
export default store(function (_) {
const pinia = createPinia();
pinia.use(piniaPluginPersistedstate); // Pinia Plugin added here
return pinia;
});

这就是我的Pinia商店的样子：

src/store/user.ts

import { defineStore } from 'pinia';
export const useUserStore = defineStore('user', {
state: () => {
return {
user: {
firstName: 'Mary',
},
};
},
persist: true, // Note that we are using a persisted state here
actions: {
setFirstName(firstName: string) {
this.user.firstName = firstName;
console.log('Name set to Pinia store: ', this.user.firstName);
},
getFirstName() {
if (!this.user.firstName) {
console.log('No name found in store. Setting "John" to Pinia store.');
this.user.firstName = 'John';
return this.user.firstName;
} else {
console.log('Name fetched from Pinia store: ', this.user.firstName);
return this.user.firstName;
}
},
},
});

以下是一个用于获取和设置firstName:的前端页面示例

src/pages/index.vue

<template>
<div>{{ firstName }}</div>
<q-form @submit="handleFirstNameSubmit">
<p>Change First Name</p>
<q-input v-model="firstNameInput" filled outline />
<q-btn label="Submit Name to Pinia Store" type="submit" />
</q-form>
<q-btn @click="handleFirstNameFetch" label="Fetch Name from Pinia Store" />
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { useUserStore } from 'src/store/user';
const userStore = useUserStore();
const firstName = ref<string>();
const firstNameInput = ref<string>();
const handleFirstNameSubmit = () => {
if (firstNameInput.value) {
userStore.setFirstName(firstNameInput.value);
}
};
const handleFirstNameFetch = () => {
firstName.value = userStore.getFirstName();
};
</script>

到目前为止，一切都很顺利。

我可以将firstName设置为Pinia存储，刷新页面，新名称仍在Pinia中。

但是，当像下面的例子一样在引导文件中使用const userStore = useUserStore(store)时，持久状态将停止工作：

src/boot/auth.ts

import { boot } from 'quasar/wrappers';
import { useUserStore } from 'src/store/user';
export default boot(({ store }) => {
const userStore = useUserStore(store);
// Do some other authentication stuff, setting initial user store values etc, below here...
});

知道发生了什么事吗？如何修复？

我认为这个插件比使用备用LocalStorage持久状态解决方案要干净得多，所以我很想让它与Quasar一起使用。

Answer 1

大家经过大量研究，我找到了这个问题的答案，您必须通过index.ts/js获得如下常量：

这是在类星体中为我工作的。：(

<script lang="ts" setup>
import store from '../stores/index';
import { useCounterStore } from '../stores/counter';
const counterStore = useCounterStore(store());
counterStore.increment();
console.log(counterStore.count);
</script>

Answer 2

Quasar应用程序的一个常见用例是在实例化根Vue应用程序实例之前运行代码。

如果应用程序没有实例化，那么pinia插件还没有安装。请参阅：https://github.com/vuejs/pinia/discussions/723#discussioncomment-2110660