Quasar is great. But, it is also a bit different when it comes to accessing the Vuex store from your code.

Why is Quasar any different?

“Is it not just Vue?”

Well, yes. But.. the project structure created by Quasar CLI differs from a “normal” that by Vue CLI. Quasar CLI builds on top of Vue as well but may not follow similar practices to other frameworks / libraries using Vue.

If you can’t really move away from the standard structure, just use Quasar as a plugin in a project created by Vue CLI. You may lose some features, but you may find yourself at home and stay happy. In that case, you could leverage your existing knowledge on using Vuex states and mutations in multiple ways.

Or.. you could just experiment more and accept a different normal.

An app created by Quasar CLI does not have main.js. Vue compile/load sequence is taken care by quasar with options defined in a /quasar.conf file.

The store/index.js file in Vue CLI will have a function invocation -

1
2
3
4

// ...
export default new Vuex.Store({
  // ...
});

This store is then used in main.js..

1
2
3
4
5
6
7
8
9

import store from "./store";

// ...

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");

This and the corresponding setup within Vue CLI projects make it convenient to access states or mutations (in addition to helper functions).

1. Use this.$store in components, store modules, or router

2. Directly import store and use it to access store functions

   1 2 3 4 5 6

   import store from "./store"; // ... if (!store.state.auth.isLoggedIn) { // how do you penalise a person without login }

In Quasar CLI, the /store/index.js file returns a store object..

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

//...

export default function({ ssrContext }) {
  const Store = new Vuex.Store({
    namespaced: true,
    //...
    return Store;
  }
}

… but this is not used in the same way as Vue CLI.

Also, the modules are structured within folders in /src/store by default. And.. you can use quasar CLI to create a new module.

Directly accessing store will not work -

1. Can’t just import store

   1 2 3 4

   import store from "./store"; store.set("blah", val); // store is a function and does not support `set`

2. this.$store is undefined and not available in stores / modules

How can you use a Vuex store in Quasar?

You have more than one way to get to the store..!

Use helper functions

Continue to use mapState, mapMutations, and friends to manage your state.

Use Pathify

Works great everywhere. Use sync in store modules or in components. See working with Pathify.

Use “normal” commit

Fall back on the trusty commit in store modules!

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

// ...
export default {
  name: "contact",
  namespaced: true,
  state: state,

  actions: {
    async updateContact({ commit }, data) {
      //...
      commit("first_name", "Ram"); // within this module
      commit("action/updateCall", actionData, { root: true }); // mutation from `action`
      //...
    },
  },
};

Change the default store structure

Just change the Vuex store structure to access it from anywhere.

Modify ./src/store/index.js.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

import Vue from "vue";
import Vuex from "vuex";

// Use a new variable and export values to change default behaviour.
let store = null;

Vue.use(Vuex);

// .. other code

export default function () {
  const Store = new Vuex.Store({
    namespaced: true,
    name: "global",
    state: { answer: 42 },
    // mutations / getters / plugins/ other code
  });

  // add this so that we export store
  store = Store;

  // Quasar default
  return Store;
}

// add this line to access store wherever you need
export { store };

This is useful to access state as well as commits.

1
2
3

// ./src/router.js

import store from "./store/index";

Use boot time plugins (“app plugins”) in Quasar

Create a new plugin (say superfunc) by creating a new file in /src/boot/superfunc.js -

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

const superfunc = {
  // ...
  store: null,
  // ...
};

export default async ({ store, Vue }) => {
  // something to do
  if (superfunc) {
    superfunc.store = store;
  }

  Vue.prototype.$superfunc = superfunc;
};

Then happily use superfunc in places -

1

console.log("story store", this._vm.$superfunc.store);

Parting Words

Not quite what you call “super fun”, but stores simply work in Quasar, and that’s all there is to it.