[Solved]Impossible set global variable on quasar 0.15

[cklinx]

Good evening,
i want set my global variables on quasar 0.15 but i cant do it.
This is my situation: i created a plugin the manages the global variables

export default ({ Vue }) => {
  Vue.prototype.$FlagCardsHeader = false
}

i included it on “quasar.conf.js”. I can read, in my components, the variable this.$FlagCardsHeader without problem but i cant set it. If i do

this.$FlagCardsHeader=true

its value is false not true.

Any suggestions?

Thanks in advance

[benoitranque]

quick workaround:

export default ({ Vue }) => {
  Vue.prototype.$optionsObject = {
      FlagCardsHeader: false
  }
}

[cklinx]

Thanks =),
but i can’t set

this.$optionsObject.FlagCardsHeader = true

i don’t know why is not working, the value is always false.

[benoitranque]

Oh my… weird. how are you checking if it is set? it probably is not reactive

Anyways proper way to do this is to use vuex

[cklinx]

I just put it on my component’s layout:

{{$optionsObjectFlagCardsHeader}}

this is the toggle the active the method:

<q-toggle
      v-model="$optionsObject.FlagCardsHeader"
      @click="ChangeHeaderCardsStatus()"
/>

and this is the function:

ChangeHeaderCardsStatus () {
      this.$optionsObject.FlagCardsHeader = true
    }

anyway i’m gonna to check out vuex, but i think is too much for 4 global variables ^^

[cklinx]

I just discovered that the variable change but quasar doesn’t refresh it. In fact if i go to another component and back to the first one the variable’s value is true (i see the header active in my app also).

So actually i dont have any idea how solve the problem.

[leopiccionia]

The variable will be updated locally, only, as it will be scoped inside component. The Vue.prototype.* approach is good for global constants, not so much for global variables.

For managing cross-component variables, you need either a global bus, web storage or – the very best solution – Vuex.

[cklinx]

Thanks for you help leo,
to see the correct variable’s value is enough change component. Is like quasar doesn’t refresh the variable in the current component. So I think is a refresh problem. With quasar 0.14.8 I used this.$root.variable and it worked perfectly.

[leopiccionia]

Silly question, but are you sure that the function is being called? Have you tried substituting @click by @click.native?

[benoitranque]

Try console.log() instead of {{variable}}. Like I said, it probably is not reactive, meaning even if variable value changes, it will not be detected by Vue. Anyways this is a Vue issue and not a Quasar issue.

[cklinx]

@leopiccionia said in Impossible set global variable on quasar 0.15:

Silly question, but are you sure that the function is being called? Have you tried substituting @click by @click.native?

Ok i tried with @click.native and finally i can execute the function (i can see the console.log()), with just @click the function is not execute. Anyway i think is the toggle object that change the this.$optionsObject.FlagCardsHeader value in fact its change also without the @click method (just clicking on the toggle).

@benoitranque said in Impossible set global variable on quasar 0.15:

Try console.log() instead of {{variable}}. Like I said, it probably is not reactive, meaning even if variable value changes, it will not be detected by Vue. Anyways this is a Vue issue and not a Quasar issue.

It is like you say, vue not refresh the variable.

Gonna to try a fresh installation and see if i will have the same result.

[cklinx]

Ok, same problem with a fresh installation. Do you have the same problem? I will let my code so you can reproduce it:
just change pages/index.vue code with

<template>
  <q-page class="flex flex-center">
    <q-toggle
      v-model="$optionsObject.FlagCardsHeader"
      @click.native="ChangeHeaderCardsStatus($optionsObject.FlagCardsHeader)"
    />
  </q-page>
</template>

<script>
import {
  QToggle
} from 'quasar'

export default {
  name: 'PageIndex',
  components: {
    QToggle
  },
  methods: {
    ChangeHeaderCardsStatus (asd) {
      console.log(asd)
    }
  }
}
</script>

and this is a plug-in

// import something here

// leave the export, even if you don't use it
export default ({ Vue }) => {
  Vue.prototype.$optionsObject = {
      FlagCardsHeader: false,
  }
}

[cklinx]

Thanks for your help guys! Solved with vuex.

[rachitpant]

This is BS. Using vuex for something so simple. I even tried using a plugin vue-global-var that uses vuex internally , that didn’t seem to work either. Same problem. You can intialize but can’t change.

[s.molinari]

It’s not BS. Having general global variables is an anti-pattern and not “something so simple”. Vuex is, however, a global store for data and offers reactivity to boot, and thus since it is a viable, accepted and “built-in” pattern to Vue, it is the solution to “global data” for your app.

Scott