How to store/load a global configuration object using axios?

SeRiusRod

Hi, I’m fairly new to Quasar. I’m working on a project and I’m trying to add a global configuration object for app-wide settings, that should be loaded using axios, either from a json file or api srv, still not decided.
But I’m confused by the differences in main js file of quasar.

Can someone tell me whats the right way of doing this with Quasar?

beets

@SeRiusRod Is it a requirement that you load via axios? For example the settings change often and you don’t want to rebuild / redeploy each time it changes?

I ask because if these config options are needed to render anything like a main menu, you’ll have to block the rendering of the UI until axios fetches the file. You can do this two ways:

Load in a boot file (white screen until complete)
Load in App.vue (can show a loading icon until complete)

Either way you’d probably want to store the result into vuex. Let me know which way you want to go and I’ll post an example.

SeRiusRod

Thanks @beets
This is a very basic time programming app.
It has a q-select for selecting a vacuum robot and below basic settings like start and stop cleaning time.

The robot vacuums send name and status periodically via mqtt. When I add a new one and I receive announcement for the first time I create a new element in a RobotConfigurations array. (This and API srv temporarily made in node-red). From this array I get the list of robots for the select. And it can grow at any time.

Then the app needs a small config that stores the robot you’re currently configuring (q-select) to show status and configuration when app opens. I thought that could be a json file, but I suppose that, as this is a SPA/PWA would be more correct to store this setting per user, like in a cookie.

The idea was to use Axios as the data provider because that’s the one I used before and I know alongside with node-red.
What do you think?

beets

@SeRiusRod Per user would definitely be better here. You can use https://www.npmjs.com/package/vuex-persistedstate

Basically,

yarn add vuex-persistedstate

And then in src/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from "vuex-persistedstate";


Vue.use(Vuex)

export default function (/* { ssrContext } */) {
  const Store = new Vuex.Store({
    plugins: [createPersistedState()],

    modules: {
    },

    // enable strict mode (adds overhead!)
    // for dev mode only
    strict: process.env.DEV
  })

  return Store
}

I think that’s all that is needed, but it’s been a while since I used this plugin. Otherwise, just using quasar’s cookie methods could probably work for your usage.

Regarding calling apis with axios, that is pretty common. I use cross-fetch, but if you’re used to axios I’d stick to it.

SeRiusRod

@beets said in How to store/load a global configuration object using axios?:

vuex-persistedstate

Thanks again beets. But that leaves me with the original question.
As per vuex-persistedstate, you should add it to the index.js file. Like in this sample:

import Vue from 'vue'
import Vuex from 'vuex';
import createPersistedState from 'vuex-persistedstate';

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  plugins: [createPersistedState()],
  mutations: {
    increment: state => state.count++,
    decrement: state => state.count--
  }
});

new Vue({
  el: '#app',
  computed: {
    count() {
      return store.state.count;
    }
  },
  methods: {
    increment() {
      store.commit('increment');
    },
    decrement() {
      store.commit('decrement');
    }
  }
});

As you stated. And there comes the store declaration, but that’s in Vuejs. Quasar doesn’t allow to modify the Vue instantiation to add elements (client-entry.js)
And that’s what’s out of my knowledge.

beets

@SeRiusRod said in How to store/load a global configuration object using axios?:

As you stated. And there comes the store declaration, but that’s in Vuejs

You can edit the store, in src/store/index.js. I agree sometimes I wish I had a bit more control over the main.js file in quasar, but you can pretty much do anything with the store / router index files, and boot files.

SeRiusRod

Completely. I had the intention of porting two more plain Vue projects I have to quasar, as it seemed cleaner, but now I’ll give it a second thought. Those are loading a global data object.

I finally ended using the localStorage wrapper. And it works. Although I don’t know if it’s better or worse.

No More Posting New Topics!

How to store/load a global configuration object using axios?