Changing the state management system of existing quasar application from vuex to pinia

user_848068 0
Viewed 449

Tried this link and created my first store in Quasar using Pinia, I also needed to change the .quasar/app.js manually to add the Pinia store and to make Pinia functional.

import { Quasar } from 'quasar'
import { markRaw } from 'vue'
import RootComponent from 'app/src/App.vue'

import createStore from 'app/src/stores/index'
import createRouter from 'app/src/router/index'

export default async function (createAppFn, quasarUserOptions) {
  // Create the app instance.
  // Here we inject into it the Quasar UI, the router & possibly the store.
  const app = createAppFn(RootComponent)
  app.config.devtools = true
  

  app.use(Quasar, quasarUserOptions)

    const store = typeof createStore === 'function'
      ? await createStore({})
      : createStore

    
      app.use(store)
  const router = markRaw(
    typeof createRouter === 'function'
      ? await createRouter({store})
      : createRouter
  )

    // make router instance available in store
    
      store.use(({ store }) => { store.router = router })

  // Expose the app, the router and the store.
  // Note that we are not mounting the app here, since bootstrapping will be
  // different depending on whether we are in a browser or on the server.
  return {
    app,
    store,
    router
  }
}

But the problem is .quasar/app.js is re-written with default contents as soon as quasar dev is executed and again I don't have access to the Pinia stores anymore.

As I said this application was based on vuex formerly.

pinia quasar-framework vuejs3
4 Answers

In my case i didn't need to edit any special files, simply replace the index.js in the stores folder. To get quasar CLI to then use pinia when running quasar new store I had to use quasar clean and just like that I had fully transitioned.

user_100723860

Problem is older version of @quasar/app-webpack package. It got support for Pinia since v3.4.0. Check release notes here. So basically upgrade this package.

Run quasar upgrade -i and then quasar new store <store_name> [--format ts] It will create a stores/ directory with pinia.

user_40471860

Make sure you have the index file for pinia.

In "src/stores/index.js"

import { store } from 'quasar/wrappers'
import { createPinia } from 'pinia'

/*
 * If not building with SSR mode, you can
 * directly export the Store instantiation;
 *
 * The function below can be async too; either use
 * async/await or return a Promise which resolves
 * with the Store instance.
 */

export default store((/* { ssrContext } */) => {
  const pinia = createPinia()

  // You can add Pinia plugins here
  // pinia.use(SomePiniaPlugin)

  return pinia
})

Try checking quasar info

quasar info

Notice @quasar/app-webpack and vuex.

If you are using @quasar/app, try to move to @quasar/app-webpack by upgrading quasar.

quasar upgrade -i

If you have vuex installed in your quasar info output, try to remove it.

npm uninstall vuex

In your package-lock.json, look for "node_modules/vuex" and delete the key and value.

Then delete your "node_modules" folder and run npm i

After that, run quasar clean.

You may try creating a Pinia store via quasar command to validate it.

quasar new store <store_name>

It should generate a pinia store instead of vuex store.

user_109707860

My solution was to remove and reinstall node_modules

user_27753760
Related