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 ?
