quasar v2 vuex
-
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 ?
-
@pospi try using the object form ie.
...mapGetters({ searchForm: 'client/searchForm', resultForm: 'client/resultForm' }) ...
-
@metalsadman Thanks, it helped me a lot !