मेरे Vuex ऐप में, मेरे पास एक अपडेट फॉर्म है जो उपयोगकर्ता के प्रोफाइल (Vuex स्टोर से) के साथ इनपुट फ़ील्ड को पॉप्युलेट करता है, फिर सबमिशन पर फॉर्म को डेटाबेस में सबमिट करता है।

इसलिए मुझे पृष्ठ पर उपयोगकर्ता की प्रोफ़ाइल प्रदर्शित करने की आवश्यकता है, लेकिन जब उपयोगकर्ता फॉर्म में मूल्यों को बदल रहे हैं तो उन्हें अपडेट (प्रतिक्रियात्मक रूप से) नहीं करना चाहते हैं, क्योंकि मेरे मामले में यह भ्रामक है यदि उपयोगकर्ता फॉर्म को पूरा नहीं करता है पृष्ठ और उस पर वापस आता है। तब ऐसा लग सकता है कि डेटा अपडेट कर दिया गया है (जो ऐसा नहीं है क्योंकि उन्होंने अभी तक फॉर्म जमा नहीं किया है)।

टेम्पलेट दृश्य

<div class="d-block mb-5">
            <label for="profile-description" class="mb-2">{{
              $t('setting.change_profile.self_introduction')
            }}</label>
            <textarea
              v-model="profile.self_introduction"
              class="w-100 resize-none border px-3 py-2"
              rows="8"
              id="profile-description"
            ></textarea>
          </div>

टाइपस्क्रिप्ट फ़ाइल

public profile: any = {
    email_option: 1,
    avatar: '',
    last_name: '',
    first_name: '',
    last_name_kana: '',
    first_name_kana: '',
    self_introduction: ''
  }

  created() {
    this.getUserProfile()
  }

  getUserProfile() {
    UserService.getUserProfile()
      .then(res => {
        if (res.status === 200) {
          this.profile = res.data
          UserModule.HANDLE_USER_PROFILE(this.profile)
        }
      })
      .catch(error => {
        console.log(error)
      })
  }

  updateProfile() {
    this.$refs.observer.validate().then(isValidate => {
      if (!isValidate) {
        return
      } else {
        const new_profile = {
          email_option: this.profile.email_option,
          avatar: this.profile.avatar,
          last_name: this.profile.last_name,
          first_name: this.profile.first_name,
          last_name_kana: this.profile.last_name_kana,
          first_name_kana: this.profile.first_name_kana,
          self_introduction: this.profile.self_introduction
        }
        UserService.updateUserProfile(new_profile)
          .then(res => {
            if (res.status === 200) {
              let user_name = `${this.profile.first_name} ${this.profile.last_name}`
              UserModule.UPDATE_USER_NAME(user_name)
              this.$bvModal.show('modal-success')
            }
          })
          .catch(error => {
            this.getUserProfile()
            this.$bvModal.show('modal-error')
          })
      }
    })
  }

वूएक्स स्टोर

profile: {
      email: '',
      email_option: 1,
      avatar: require('@/assets/images/user-avatar.png'),
      last_name: '',
      first_name: '',
      last_name_kana: '',
      first_name_kana: '',
      self_introduction: ''
    },
@Mutation
  handleUserProfile(user_profile: any) {
    this.user.profile = user_profile
  }

  @Action({ rawError: true })
  HANDLE_USER_PROFILE(user_profile: any) {
    this.context.commit('handleUserProfile', user_profile)
  }
0
thinh6699 27 अगस्त 2021, 07:38
मेरे उत्तर को स्वीकृत उत्तर के रूप में चिह्नित करना अच्छा होगा। धन्यवाद और अगले प्रश्न पर मिलते हैं।
 – 
StevenSiebert
27 अगस्त 2021, 23:15

1 उत्तर

सबसे बढ़िया उत्तर

समस्या आपके v-model="profile.self_introduction" में आपके Template.vue में है। चूंकि profile.self_introduction सीधे स्टोर की स्थिति को प्रभावित करता है, इसलिए आपको निम्न त्रुटि भी आ सकती है:

Error: [vuex] do not mutate vuex store state outside mutation handlers.

इसे हल करने के लिए, आपको अपने स्टोर राज्यों के संदर्भ के बिना एक वी-मॉडल सेट अप करना होगा और सबमिट करने के बाद इसे स्टोर पर भेजना होगा।

यदि आपको स्टोर से डेटा के साथ फॉर्म को पहले से भरना है, तो आपको डेटा को किसी नई वस्तु पर लागू करने के आसान तरीके के आसपास काम करने की आवश्यकता है। उदाहरण के लिए:

this.localToFillForm = this.objectFromStore; 

यदि आप किसी फ़ॉर्म को पहले से भरने के लिए this.localToFillForm का उपयोग करते हैं और इस फ़ॉर्म के लिए इसे v-मॉडल के रूप में भी उपयोग करते हैं, तो यह अभी भी this.objectFromStore से संबंधित है।

एक नई वस्तु बनाने के लिए एक आसान चाल है:

this.localToFillForm = JSON.parse(JSON.stringify(this.objectFromStore));

इस मामले में, this.localToFillForm अब this.objectFromStore से संबंधित नहीं होगा।

1
StevenSiebert 27 अगस्त 2021, 14:31
क्या आप इस मामले में मेरी मदद कर सकते हैं? मैंने प्रोफ़ाइल सेट करके कोशिश की = store.state.objectfromvuex लेकिन यह बहुत अच्छी तरह से काम नहीं कर रहा है
 – 
thinh6699
27 अगस्त 2021, 22:19
इस नई समस्या के बारे में अधिक जानकारी देखना अच्छा होगा। यदि यह इस विषय से संबंधित है, तो बस अपना उत्तर संपादित करें। यदि यह संबंधित नहीं है, तो कृपया एक नया प्रश्न डालें और मैं वहां आपकी सहायता करने का प्रयास करूंगा। अगर यहां मेरे उत्तर ने आपको इस मामले में मदद की तो यह अच्छा होगा, यदि आप स्वीकृत उत्तर के रूप में चिह्नित करते हैं।
 – 
StevenSiebert
27 अगस्त 2021, 22:31
1
आपका बहुत बहुत धन्यवाद! मैं इसे पहले अपने आप ठीक करने की कोशिश करूंगा। उसके बाद आप मदद कर सकें तो अच्छा होगा
 – 
thinh6699
27 अगस्त 2021, 23:02
ज़रूर। बस vue.js टैग के तहत सवाल पूछें और मैं आपकी मदद करूंगा।
 – 
StevenSiebert
27 अगस्त 2021, 23:05