Cannot use the property which set globally on the store with Setup Stores (Unable to use 'this' in arrow function) #2587
-
Hello everyone! stores/index.tsimport { createPinia } from 'pinia';
import { type Ref, markRaw, ref } from 'vue';
import { router } from '~/main';
const pinia = createPinia();
const globalLoading = ref(false);
pinia.use(({ store }) => {
store.router = markRaw(router);
store.globalLoading = globalLoading;
});
declare module 'pinia' {
interface PiniaCustomProperties {
router: typeof router
globalLoading: Ref<boolean>;
}
}
export default pinia; main.tsimport pinia from '~/stores/index';
...
createApp(App).use(pinia).use(router).mount('#app'); stores/auth.tsexport const useAuthStore = defineStore('auth', () => {
...
// <- How can I call the `router` and `globalLoading` here?
}) How can I call the defineStore('auth', (router, globalLoading) => { // <- Add parameters here
...
}) |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments
-
|
Beta Was this translation helpful? Give feedback.
-
Thank you so much for your answer! I'm a Pinia newbie and I'm working hard to learn it. I wonder if there will be a chance to make some method like hook in the future for composition style. Thank you again. |
Beta Was this translation helpful? Give feedback.
useRouter()
within the storeglobalLoading
: just import it. This only works in SPA. If you need SSR to work too, use https://vuejs.org/api/composition-api-dependency-injection.html#composition-api-dependency-injection