quasar v2 vuex

pospi

Hi, I have problem with vuex :
store/store-client.js :

const state = {
    searchForm: {
        retenceNumber: '',
        clientName: '',
        birthNumber: '',
        partnerNumber: '',
        loanNumber: ''
    },
    resultForm: {
      clientName: '',
      phoneNumber: '',
      email: '',
      birthDate: '',
      birthNumber: '',
      partnerNumber: '',
      psc: '',
      cmp: '',
      emailGarant: ''
    }
}

const mutations = {

}

const actions = {

}

const getters = {
    searchForm: (state) => {
        return state.searchForm
    },
    resultForm: (state) => {
        return state.resultForm
    }
}

export default {
    namespaced: true,
    state,
    mutations,
    actions,
    getters
}

store/index.js

import { store } from 'quasar/wrappers'
import { createStore } from 'vuex'

import client from './store-client'

/*
 * 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(function (/* { ssrContext } */) {
  const Store = createStore({
    modules: {
      client
    },

    // enable strict mode (adds overhead!)
    // for dev mode and --debug builds only
    strict: process.env.DEBUGGING
  })

  return Store
})

pages/Klient_tab.vue

<template>
  <q-page class="items-start justify-start q-pa-md">
    <div class="row no-wrap items-center">
      <h5 class="page-title">Klient</h5>  
      <q-space /> 
      <q-btn  color="primary" label="Vyhledat" :disable="searchEnabled" @click="searchForClient" :loading="loading" style="width: 150px">
        <template v-slot:loading>
          <q-spinner-hourglass class="on-left" />
          Načítám ...
        </template>
      </q-btn>      
      <div class="col-xs-none col-sm-none col-md-none col-lg-2" />
    </div>
    <div class="text-subtitle2 q-pt-none q-pl-xs">Vyhledávání</div>
    <div class="row q-col-gutter-x-md q-col-gutter-y-lg q-pt-md q-pl-sm">        
      <q-input outlined class="col-xs-12 col-sm-4 col-md-3 col-lg-2" v-model="searchForm.retenceNumber" type="search" label="Retence č." :dense="dense">
        <template v-slot:append>
          <q-icon name="search" />
        </template>
      </q-input>
      <q-input outlined class="col-xs-12 col-sm-4 col-md-3 col-lg-2" v-model="searchForm.clientName" type="search" label="Jméno klienta" :dense="dense">
        <template v-slot:append>
          <q-icon name="search" />
        </template>
      </q-input>
      <q-input outlined class="col-xs-12 col-sm-4 col-md-3 col-lg-2" v-model="searchForm.birthNumber" type="search" label="Rodné číslo" :dense="dense">
        <template v-slot:append>
          <q-icon name="search" />
        </template>
      </q-input>
      <q-input outlined class="col-xs-12 col-sm-4 col-md-3 col-lg-2" v-model="searchForm.partnerNumber" type="search" label="Číslo partnera" :dense="dense">
        <template v-slot:append>
          <q-icon name="search" />
        </template>
      </q-input>
      <q-input outlined class="col-xs-12 col-sm-4 col-md-3 col-lg-2" v-model="searchForm.loanNumber" type="search" label="Číslo úvěru" :dense="dense">
        <template v-slot:append>
          <q-icon name="search" />
        </template>
      </q-input>      
    </div>
    <div class="text-subtitle2 q-pt-md q-pl-xs">Načtená data o klientovi</div>
    <div class="row q-col-gutter-x-md q-col-gutter-y-lg q-pt-md q-pl-sm">
      <q-input outlined class="col-xs-12 col-sm-8 col-md-6 col-lg-4" v-model="resultForm.clientName" label="Jméno klienta" :dense="dense" readonly />
      <q-input outlined class="col-xs-12 col-sm-4 col-md-3 col-lg-2" v-model="resultForm.phoneNumber" label="Telefon" :dense="dense" readonly />
      <q-input outlined class="col-xs-12 col-sm-4 col-md-3 col-lg-2" v-model="resultForm.email" label="Email" :dense="dense" readonly />
      <q-input outlined class="col-xs-12 col-sm-4 col-md-3 col-lg-2" v-model="resultForm.birthDate" label="Datum narození" :dense="dense" readonly />
    </div>
    <div class="row q-col-gutter-x-md q-col-gutter-y-lg q-pt-xs q-pl-sm">
      <q-input outlined class="col-xs-12 col-sm-4 col-md-3 col-lg-2" v-model="resultForm.birthNumber" label="Rodné číslo" :dense="dense" readonly />
      <q-input outlined class="col-xs-12 col-sm-4 col-md-3 col-lg-2" v-model="resultForm.partnerNumber" label="Číslo partnera" :dense="dense" readonly />
      <q-input outlined class="col-xs-12 col-sm-4 col-md-3 col-lg-2" v-model="resultForm.psc" label="PSČ klienta" :dense="dense" readonly />
      <q-input outlined class="col-xs-12 col-sm-4 col-md-3 col-lg-2" v-model="resultForm.cmp" label="ČMP garanta" :dense="dense" readonly />
      <q-input outlined class="col-xs-12 col-sm-4 col-md-3 col-lg-2" v-model="resultForm.emailGarant" label="Email garanta" :dense="dense" readonly />
    </div>
  </q-page>
</template>

<script>
import { defineComponent, ref } from "vue";
import { mapGetters } from "vuex";

export default defineComponent({
  name: "Klient",
  setup () {
    return {
      dense: true,
      loading: ref(false)
    };
  },  
  computed: {
    searchEnabled () {
      return this.searchForm.retenceNumber.length <= 0 &&
        this.searchForm.clientName.length <= 0 &&
        this.searchForm.birthNumber.length <= 0 &&
        this.searchForm.partnerNumber.length <= 0 &&
        this.searchForm.loanNumber.length <= 0;
    },
    ...mapGetters('client', [searchForm, resultForm])
    /*searchForm () {
      return this.$store.getters['client/searchForm']
    },
    resultForm () {
      return this.$store.getters['client/resultForm']
    } */   
    
  },
  methods: {
    async searchForClient () {
      this.loading = true
      //var rdata = await this.$axios.get('api/RetCalc/GetSearchClient')      
      //this.searchForm = rdata.data.data2.searchForm
      //this.resultForm = rdata.data.data2.resultForm
      this.searchForm.clientName = 'Franta Omacka'
      this.loading = false
      
    }
  }
});
</script>

<style></style>

in console warning : vue-router.esm-bundler.js?f6c4:71 [Vue Router warn]: ReferenceError: searchForm is not defined

and page is empty

but if i change maping to computed prop :

computed: {
    searchEnabled () {
      return this.searchForm.retenceNumber.length <= 0 &&
        this.searchForm.clientName.length <= 0 &&
        this.searchForm.birthNumber.length <= 0 &&
        this.searchForm.partnerNumber.length <= 0 &&
        this.searchForm.loanNumber.length <= 0;
    },
    //...mapGetters('client', [searchForm, resultForm])
    searchForm () {
      return this.$store.getters['client/searchForm']
    },
    resultForm () {
      return this.$store.getters['client/resultForm']
    }    
    
  },

it is working

What i do wrong ?

metalsadman

@pospi try using the object form ie.

...mapGetters({
  searchForm: 'client/searchForm', 
  resultForm: 'client/resultForm'
})
...

pospi

@metalsadman Thanks, it helped me a lot !

No More Posting New Topics!

quasar v2 vuex