Automatically create and set Pinia instance as active when one does not exist

[bitx1]

What problem is this solving

• Eliminates boilerplate createApp(...).use(createPinia()) (common usage) or setActivePinia(createPinia())
• Conceptually decouples Vue App instance from Pinia stores. You can use Pinia stores at any point... before or after Vue app creation.
• Faster bootstrapping for common usage pattern. If I am not mistaken, while more than one pinia instance can be instantiated, one pinia instance suffices and is the common usage pattern that is recommended.
• Eliminates the chicken and egg problems with up-front logic dependent on pinia stores that is ran prior to Vue App creation. (In my case, I have authentication-logic running in my main entry file before any other logic.)
• Allows for pattern where you can export single store instance using defineStore({...})() without worries opposed to useStore function defineStore({...}). Makes consumption easier where I can skip useStore() assignment to a local variable when I need to use the store instance in multiple places.
• Author does not have to deal with getActivePinia was called with no active Pinia. Did you forget to install pinia? issues again :)

Proposed solution

As part of defineStore options (3rd parameter), introduce some new setting (e.g. createActivePinia) which will create a Pinia instance (and set it active) if it does not exist at the time the store instance is created/retrieved via useStore(). Default setting to true.

Describe alternatives you've considered

• Same as proposed solution but default createActivePinia setting to false.

[posva]

Unfortunately, this is technically not possible because the created pinia needs access to the app: https://github.com/posva/pinia/blob/v2/packages/pinia/src/createPinia.ts#L21

The whole usage is explained in docs. If you have ideas on how to improve them, PRs are welcome!

[bitx1]

Thanks for pointing out the dependency on Vue. To clear up the misunderstanding, I was not advocating to decouple Vue from Pinia, just eliminate the need to instantiate Pinia instance directly. For example, if I wanted to run some upfront security-logic and locale-init logic before creating a Vue App, then the following will not work:

Does Not Work

my-stores.js

export const useAuthStore = defineStore('authStore', {...})
export const useLocaleStore = defineStore('localeStore', {...})

security-init.js

import { useAuthStore } from './my-stores.js'

const authStore = useAuthStore()
// init custom logic

locale-init.js

import { useLocaleStore } from './my-stores.js'

const localeStore = useLocaleStore()
// init custom logic

main.js

import './security-init.js'
import './locale-init.js'

createApp(...).mount('#app');

This does not work because I did not create and set a Pinia instance to active. In this particular simplified case I could use a dynamic import but I was hoping to demonstrate that if I were to normally import other modules that rely on a Pinia store, then I do not have an opportunity to create and set a Pinia instance before hand. (In a more realistic case, while I was setting up the router before App creation, I had to rely a security guard that depends on a Pinia store and I had to utilize an async function as a workaround.)

Works But Not Clean

I could delay execution of init custom logic by wrapping them in a function and invoking them (see example below) but that is not as desirable as my proposed solution further below.

main.js

import { initSecurity } from './security-init.js'
import { initLocale } from './security-init.js'

setActivePinia(createPinia())
initSecurity()
initLocale()

createApp(...).mount('#app');

My Proposed Solution

With my proposed solution, not only can I avoid dynamic imports and function wrappers, I can also avoid having to deal with useStore functions directly whenever I want access to the store. For example....

my-stores.js

export const authStore = defineStore('authStore', {...}, {createActivePinia: true})()
export const localeStore = defineStore('localeStore', {...}, {createActivePinia: true})()

security-init.js

import { authStore } from './my-stores.js'

// init custom logic  (authStore variable already assigned and available )

locale-init.js

import { localeStore } from './my-stores.js'

// init custom logic  (localeStore instance already assigned and available )

main.js

import './security-init.js'
import './locale-init.js'

createApp(...).mount('#app');

[3zzy]

Yes, something like this would also be useful when Vue components are consumed as Custom Elements and there's no Vue instance available to install the plugin. See this thread for context.

[Maxim-Mazurok]

Not sure why setActivePinia(createPinia()) isn't clean, but I've used it with my Custom Elements project, like so:

import { createPinia, setActivePinia } from "pinia";
import HelloWorld from "./components/HelloWorld";
import ByeWorld from "./components/ByeWorld";

setActivePinia(createPinia());

customElements.define("hello-world", HelloWorld);
customElements.define("bye-world", ByeWorld);

(since it's elements project only, no app instance)

And it seems to work fine on a basic counter example.

[kolyaraketa]

And it seems to work fine on a basic counter example.

How did you get rid of that warning? [Vue warn]: injection "Symbol(pinia)" not found.

[Maxim-Mazurok]

And it seems to work fine on a basic counter example.

How did you get rid of that warning? [Vue warn]: injection "Symbol(pinia)" not found.

Not sure when you see this warning?...
I'm using vite v2.9.1 and don't see this warning when building...

These are my configs:

vite.config.ts:

import { fileURLToPath, URL } from "url";

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vueJsx from "@vitejs/plugin-vue-jsx";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), vueJsx()],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
  build: {
    rollupOptions: {
      input: "src/main.ts",
      output: {
        file: "../src/assets/vendor/vue-elements/vue-elements.js",
        dir: undefined, // to avoid "Invalid value for option "output.dir" - you must set either "output.file" for a single-file build or "output.dir" when generating multiple chunks." error
      },
    },
  },
  test: {
    transformMode: {
      web: [/\.[jt]sx$/],
    },
  },
});

tsconfig.app.json:

{
  "extends": "@vue/tsconfig/tsconfig.web.json",
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
  "exclude": ["src/**/__tests__/*"],
  "compilerOptions": {
    "composite": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

vue: 3.2.32
vite: 2.9.1
pinia: 2.0.13

This looks like a similar issue to yours: #897

However I don't use new Vue() as I'm not creating an app, but rather custom elements, so I use defineCustomElement() instead.

[kolyaraketa]

Not sure when you see this warning?...

Warning showing all time in developer mode:

I do not use new Vue() too, and this is my main.js file:

import { defineCustomElement } from 'vue';
import Prices from '@/Prices.ce.vue';
import { createPinia, setActivePinia } from "pinia";

setActivePinia(createPinia());

const pricesElement = defineCustomElement(Prices);
customElements.define('prices-list', pricesElement);

After building warning does not showing, and working correctly 🤷‍♂️

Versions of my packages:

"pinia": "^2.0.22",
"vue": "^3.2.37",
"vue-i18n": "^9.1.10",
"vite": "^3.0.1"

So, i don't know why u do not see this warning, maybe i do something wrong?

[baradatbiu]

And it seems to work fine on a basic counter example.

How did you get rid of that warning? [Vue warn]: injection "Symbol(pinia)" not found.

@kolyaraketa Have you found a solution?

[kolyaraketa]

And it seems to work fine on a basic counter example.

How did you get rid of that warning? [Vue warn]: injection "Symbol(pinia)" not found.

@kolyaraketa Have you found a solution?

Nope. Everything work perfect, but warning message still showing in developer mode. Pro build keep silence.