No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    quasar v2 vuex

    Help
    2
    3
    634
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • P
      pospi last edited by 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 1 Reply Last reply Reply Quote 0
      • metalsadman
        metalsadman @pospi last edited by

        @pospi try using the object form ie.

        ...mapGetters({
          searchForm: 'client/searchForm', 
          resultForm: 'client/resultForm'
        })
        ...
        
        1 Reply Last reply Reply Quote 0
        • P
          pospi last edited by

          @metalsadman Thanks, it helped me a lot !

          1 Reply Last reply Reply Quote 0
          • First post
            Last post