Vuex - गणना की गई संपत्ति "नाम" को सौंपा गया था, लेकिन इसका कोई सेटर नहीं है

Question 1

मेरे पास कुछ फॉर्म सत्यापन के साथ एक घटक है। यह एक मल्टी स्टेप चेकआउट फॉर्म है। नीचे दिया गया कोड पहले चरण के लिए है। मैं यह सत्यापित करना चाहता हूं कि उपयोगकर्ता ने कुछ पाठ दर्ज किए, अपना नाम वैश्विक स्थिति में संग्रहीत किया और फिर अगले चरण पर भेज दिया। मैं vee-validate और vuex का उपयोग कर रहा हूँ

<template>
<div>
    <div class='field'>
        <label class='label' for='name'>Name</label>
        <div class="control has-icons-right">

            <input name="name" v-model="name" v-validate="'required|alpha'" :class="{'input': true, 'is-danger': errors.has('name') }" type="text" placeholder="First and Last">
            <span class="icon is-small is-right" v-if="errors.has('name')">
                <i class="fa fa-warning"></i>
            </span>
        </div>
        <p class="help is-danger" v-show="errors.has('name')">{{ errors.first('name') }}</p>

    </div>
    <div class="field pull-right">
        <button class="button is-medium is-primary" type="submit" @click.prevent="nextStep">Next Step</button>
    </div>
</div>
</template>

<script>
export default {
    methods: {
        nextStep(){
            var self = this;

            // from baianat/vee-validate
            this.$validator.validateAll().then((result) => {
                if (result) {
                    this.$store.dispatch('addContactInfoForOrder', self);
                    this.$store.dispatch('goToNextStep');
                    return;
                }
            });
        }
    },
    computed: {
        name: function(){
            return this.$store.state.name;
        }
    }
}
</script>

मेरे पास ऑर्डर स्टेट को संभालने और नाम रिकॉर्ड करने के लिए एक स्टोर है। अंततः मैं मल्टी स्टेप फॉर्म से सभी जानकारी सर्वर पर भेजना चाहता हूं।

export default {
  state: {
    name: '',
  },

  mutations: {
    UPDATE_ORDER_CONTACT(state, payload){
      state.name = payload.name;

    }
  },

  actions: {
    addContactInfoForOrder({commit}, payload) {
      commit('UPDATE_ORDER_CONTACT', payload);
    }
  }
}

जब मैं इस कोड को चलाता हूं तो मुझे एक त्रुटि मिलती है Computed property "name" was assigned to but it has no setter.

मैं नाम क्षेत्र से वैश्विक राज्य के लिए मूल्य कैसे बांध सकता हूं? मैं चाहूंगा कि यह लगातार बना रहे ताकि यदि कोई उपयोगकर्ता एक कदम पीछे जाए ("अगला चरण" पर क्लिक करने के बाद) तो वे इस चरण में दर्ज किए गए नाम को देखेंगे

Question 2

यदि आप v-modelएक गणना करने जा रहे हैं , तो उसे एक सेटर की आवश्यकता है । आप जो भी चाहते हैं वह अपडेटेड वैल्यू के साथ करना चाहते हैं (शायद इसे लिखें, यह $storeदेखते हुए कि आपका गेट्टर इसे किस ओर से खींचता है) आप सेटर में करते हैं।

अगर स्टोर पर वापस लिखना फॉर्म सबमिट के माध्यम से होता है, तो आप नहीं चाहते हैं v-model, आप बस सेट करना चाहते हैं:value ।

यदि आप एक मध्यवर्ती स्थिति रखना चाहते हैं, जहाँ यह कहीं बचाई गई है, लेकिन $storeफार्म जमा करने तक स्रोत को अधिलेखित नहीं करता है , तो आपको ऐसा डेटा आइटम बनाने की आवश्यकता होगी।

Question 3

यह इस तरह होना चाहिए।

आपके घटक में

computed: {
        ...mapGetters({
                nameFromStore: 'name'
            }),
        name: {
           get(){
             return this.nameFromStore
           },
           set(newName){
             return newName
           } 
        }
    }

अपने स्टोर में

export const store = new Vuex.Store({
         state:{
             name : "Stackoverflow"
         },
         getters: {
                 name: (state) => {
                     return state.name;
                 }
         }
}

Question 4

मेरे लिए यह बदल रहा था।

this.name = response.data;

गणना करने के लिए क्या रिटर्न;

this.$store.state.name = response.data;

Question 5

मैं केवल यह उल्लेख करना चाहता हूं कि यह चेतावनी क्यों दिखाई देती है, जब भी हम गणना मूल्य बनाते हैं तो यह डिफ़ॉल्ट रूप से प्राप्त होता है, हमें स्पष्ट रूप से गणना की गई संपत्ति के लिए सेटर्स को परिभाषित करने की आवश्यकता होती है,

जैसा कि VueJs, कम्प्यूटेड सेटर के प्रलेखन में उल्लेख किया गया है

आपकी गणना की गई संपत्ति इस तरह दिखाई देगी

   name: {
       get: function () {
          return yourName
       },
       set: function (newName) {
          return yourNewName
       }

अधिक उपयुक्त तरीका है कि आप mapStateस्टोर से नाम प्राप्त करने के लिए उपयोग कर सकते हैं , और अन्य विकल्प जिसे आप अपने स्टोर में गेट्टर को परिभाषित करते हैं और mapGettersस्टोर से नाम निकालने के लिए उपयोग करते हैं,

जानने के लिए महत्वपूर्ण बात: स्टोर में गेटर्स का उपयोग तब किया जाता है जब आप स्टोर से कम्प्यूटेड डेटा प्राप्त करना चाहते हैं, तो उस समय आप गेटर्स में तर्क को परिभाषित करते हैं जो आपको कम्प्यूटेड डेटा मिलता है।

गटर का उदाहरण

getters = {
  isLoggedIn (state) {
    return !!state?.activeUser?.id
  }
}

यह गेट्टर सक्रिय उपयोगकर्ता के लिए अपने राज्य की जाँच करें और लॉग इन नहीं होने पर लॉग इन करें और गलत है तो सही लौटें।

बाद में पूरे आवेदन में हम mapGettersइसे निकालने के लिए उपयोग करते हैंisLoggedIn संपत्ति और उसी के अनुसार चेक जोड़ने के हैं

आशा है कि किसी को यह मदद मिल गई :)