Pinia support

[bangdragon]

Hi, pinia store seems great. How to use it instead of vuex store.
Thanks

[ontwikkelfabriek]

@bangdragon

Just like any other Vue library/plugin:
https://github.com/posva/pinia#installation

Use Quasar's boot file to install the plugin:
https://quasar.dev/quasar-cli/boot-files

[bangdragon]

Thanks

[Mint-Joy]

Create new project without Vuex.
quasar create <folder_name>
After install, create boot files
quasar new b pinia
inside

// src/boot/pinia.js
import { boot } from "quasar/wrappers";
import { createPinia } from "pinia";

const pinia = createPinia();

export default boot(async ({ app }) => {
  app.use(pinia);
});

export { pinia };

in quasar.conf.js insert pinia in boot section, like
boot: ["axios", "pinia"],

Congratulation, pinia is enabled.
In project src folder, create folder for storage location, like
src/stores, attention not use store, because quasar will detect the repositories and will complain about the lack of vuex
example stores

// store/work.js
import { defineStore } from "pinia";

export const useWorkStore = defineStore("work", {
  state() {
    return { projectTitle: "My Super Project", backBtnView: false };
  },
});

example reactivity

import { useWorkStore } from "src/services/stores/work";

setup() {
  const work = useWorkStore();
  const projectTitle = computed(() => work.projectTitle);
  return {
    projectTitle,
  };
}

example change

import { useWorkStore } from "src/services/stores/work";

setup() {
  const work = useWorkStore();
  work.projectTitle = "User setting page";
}

This all

[bangdragon]

Thanks

[BenJackGill]

Is it still required to use src/stores instead of src/store?

When I use src/stores I get this error:

Module not found: Can't resolve imported dependency "app/src/store/index"
Did you forget to install it? You can run: npm install --save app/src/store/index

When I use src/store the error goes away and is replaced by this warning:

export 'default' (imported as 'createStore') was not found in 'app/src/store/index' (possible exports: useWorkStore)

[BenJackGill]

Ok I fixed it like this:

1. Follow the instrcutions from @Mint-Joy above, but use src/store instead of src/stores as advised.
2. Then create src/store/index.js file with these two lines:

import { store } from 'quasar/wrappers';
export default store;

Everything should work as expected for SPA (no SSR).

If using SSR you might need to follow these instructions and create an index.js file like this one.