@metalsadman Thanks for your help. I changed it according to the post you mentioned.

@metalsadman I saw that post, but I was wondering, why I’ve to change that file (which was created by the quasar cli). I thought that the creators of quasar had a special intention of writing it that way.

Hi,

I’ve some problems accessing the store within a service class. I created this service:

import Store from 'src/store'

export class DemoService {
    public static doSomething (): void {
      Store.???
   }
}

I am not able to access any store methods. The default export in src/store/index.ts is not a Vuex.Store object. Honestly, I am not sure what it is
It was generated by the quasar CLI and looks like this:

export default store(function ( {Vue} ) {
   Vue.use(Vuex)

  const Store = new Vuex.Store<StateInterface>( {
    modules: {
        ....
    },
    ...
  })
  return Store
}

My question is, how can I use the store within my service method? Do I have to pass the store as a method parameter?

Thanks in advance.
Best regards,
Daniel

I’ve the same problem. I am not using vue3! I created a Quasar project with typescript support. But when I am trying to access the store, I’ll get the same error.
My current workaround is casting the state to the interface created in the index.ts file in the store folder. In your case the cast would look like this:

(<StateInterface> this.$store.state).user

@tof06 Thank you so much. Now, it’s working!

@tof06 I tried your suggestion, but without luck. Please see my post above. Thanks again.

@tof06 Thank you so much for your help.

So, I changed it as you suggested. But: now I have a new problem. hasError is always false. I changed my template to:

<q-input
   filled
   v-model="model"
   @input="(value) => setModelValue(value)"
   label="Maximum 3 characters"
   debounce="1500"
   ref="modelRef"
   :rules="[ val => val.length <= 3 || 'Please use maximum 3 characters']"
>

Model is now a data property:

data () {
    return {
      model: "0",
    }
  }

and the setModelValue method looks like this:

setModelValue (value) {
  let isValid = this.$refs.modelRef.validate()
  // or: this.$refs.modelRef.hasError
  if (!isValid) {
    return
  }
  ...
}

If I enter an invalid value, isValid is true and this.$refs.modelRef.hasError is false. But the error message on the input field is shown, which means, the input is invalid. If I enter an other invalid value, isValid is now false. In case of a correct value, isValid is still false. Only if I enter an other valid value, isValid is true. It seems, that the validation state is one validation behind.

So, I do not unterstand why calling validate() returns true (which means, no validation error), but the correct error message is shown? What have I done wrong?

Best regards,
Daniel

Hi everyone,

On my page I use a q-input to collect a value from the user. The changed value triggers the execution of a method:

    <q-input
      filled
      v-model="model"
      label="Maximum 3 characters"
      :rules="[ val => val.length <= 3 || 'Please use maximum 3 characters']"
    />

During typing, the value of ‘model’ is used to fetch data from server by calling doAction:

    model: {
      get () {
         ...
      },
      set (value) {
         this.doAction(value)
     }
  }

The problem is that the doAction method is called even if the value is invalid. The setter is called before the validation takes place.
And this confuses me. In case of a validation error, I expected that the model value wouldn’t change, because this is the intention of validation - to only set valid values.

So, do I miss something? How can I be sure that only valid values are set - or how can I ensure that doAction is only called if the validation doesn’t fail?

Thanks for your help.
Best regards
Daniel

@walfin Thanks for your help. I changed the boot file to:

export default async ({ store, app }) => {
  await axios
    .get(...)
    .then(response => {
      ...
    })
}

And now it’s working as expected.

@s-molinari Thank you so much. This helped!