मैं Vue के साथ Vue का उपयोग करता हूं। एक मामले में मैं प्रस्तुति मूल्य प्राप्त करने के लिए अजाक्स का उपयोग करता हूं। रास्ते में कहीं, शायद computed में यह अब प्रतिक्रियाशील नहीं है।

मेरे घटक में:

props: [ 'x', 'y' ],
template: `
  <div class="presentation">
    {{ presentation }}
  </div>
`,
computed: {
  presentation() {
    return this.$store.getters.presentation({ x: this.x, y: this.y });
  }
}

Vuex स्टोर:

const store = new Vuex.Store({
  state: {
    table: {
      data: []
    }
  },
...

Vuex कार्रवाइयां:

मैं अजाक्स के साथ एक यूआरएल कॉल करता हूं और एक वादा वापस करता हूं। मैं एक उत्परिवर्तन भी करता हूं।

actions: {
  save: (context) => {
    let uri = 'some/uri';
    let params = {};
    let value = 'A value';

    return axios
    .post(uri, params)
    .then((response) => {
      context.commit('setPresentation', value);
    })
    .catch((error) => {
      console.log('error');
    })
    .finally(() => {});
  },
},

Vuex म्यूटेशन:

mutations: {
  setPresentation: (state, value) => {
    let pos = state.table.pos;
    state.table.data[pos.y][pos.x].presentation = value;
  },
}

Vuex गेटर्स:

getters: {
  presentation: (state) => (pos) => {
    return state.table.data[pos.y][pos.x].presentation;
  }
},

मैंने पहले ही निम्नलिखित के बारे में सुनिश्चित कर लिया है:

  • मैंने इसे प्रतिक्रियाशील बनाने के लिए table.data स्थिति को डिफ़ॉल्ट मान पर सेट किया
  • डेटा प्राप्त करने के लिए गेटर का उपयोग करना
  • अजाक्स कॉल के लिए एक क्रिया का उपयोग करना
  • कार्रवाई में एक प्रतिबद्धता के साथ एक उत्परिवर्तन को बुलाओ

नोट:

  • अजाक्स कॉल को एक क्रिया में होना चाहिए न कि निर्मित में, क्योंकि मैं एक से अधिक घटकों से presentation का उपयोग करने जा रहा हूं।
  • मैं एक ऐसे समाधान को प्राथमिकता देता हूं जिसके लिए बाहरी Vue प्लगइन्स की आवश्यकता नहीं है।

प्रश्न

  • मुझसे क्या छूट गया?
  • मैं इसे सर्वोत्तम तरीके से कैसे हल कर सकता हूं?
2
Jens Törnell 9 अगस्त 2019, 09:25

3 जवाब

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

आपको state.table.data[pos.y][pos.x].presentation = value; के बजाय Vue.set का उपयोग करना होगा

देखें https://vuejs.org/v2/guide/list.html#Caveats ए> विवरण के लिए

निम्नलिखित कोड के साथ अपने उत्परिवर्तन को अद्यतन करने का प्रयास करें:

if (!state.table.data[pos.y]) {
  Vue.set(state.table.data, pos.y, [])
}
Vue.set(state.table.data[pos.y], pos.x, { presentation: value })

मुझ से एक शब्द, ओपी (मूल पोस्टर):

यह पहली बार विफल क्यों हुआ था कि मैंने केवल अंतिम भाग { presentation: value } को Vue.set के साथ सेट किया था क्योंकि मेरे पास पहले से ही pos.y और pos.x एक अन्य AJAX कॉल में सेट है।

Vue के लिए पूरी तरह से जागरूक होने के लिए यदि परिवर्तन के लिए मुझे वह सब कुछ सेट करने की आवश्यकता है जो पहले से ही राज्य में सेट नहीं किया गया है, Vue.set के साथ। इसलिए मुझे Vue.set का उपयोग pos.y और pos.x को भी सेट करने के लिए करना था।

एक और उत्कृष्ट नीचे उत्तर भी देखें।

जब आप किसी आइटम को सीधे इंडेक्स के साथ सेट करते हैं तो Vue किसी सरणी में परिवर्तन का पता नहीं लगा सकता है

3
Jens Törnell 9 अगस्त 2019, 18:27

आपका उत्परिवर्तन ठीक है; वहां कोई समस्या नहीं है। Vue ऑब्जेक्ट की presentation प्रॉपर्टी को असाइनमेंट का पता लगाएगा ठीक जब तक ऑब्जेक्ट Vue द्वारा देखा जा रहा है

ज्यादातर मामलों में Vue स्वचालित रूप से वस्तुओं का निरीक्षण करेगा, लेकिन कुछ विचित्रताएं हैं (विशेषकर सरणियों के साथ) जिनसे आपको अवगत होने की आवश्यकता है।

जब आप किसी आइटम को सीधे इंडेक्स के साथ सेट करते हैं तो Vue किसी सरणी में परिवर्तन का पता नहीं लगा सकता (docs ए>)।

मुझे लगता है कि आप अपने सरणी को निम्न तरीके से पॉप्युलेट कर रहे हैं:

for (let y = 0; y < Y_MAX; y++) {
  // This is bad! Vue cannot detect this change
  state.table.data[y] = []

  for (let x = 0; x < X_MAX; x++) {
    // Same as above, Vue cannot detect this change. As a consequence,
    // the object you are assigning to the array will not be observed
    // by Vue! So if you were to mutate the presentation property
    // of this object, Vue won't know about it.
    state.table.data[y][x] = { presentation: '...' }
  }
}

तो अपनी समस्या को ठीक करने के लिए आपको बस यह सुनिश्चित करने की ज़रूरत है कि आप निम्न तरीके से सरणी को बदल नहीं रहे हैं:

array[index] = whatever

आपको इसके बजाय ऐसा करने की ज़रूरत है:

Vue.set(array, index, whatever)

वैकल्पिक रूप से, आप पहले सरणी बना सकते हैं और फिर उसे state.table.data अंतिम को असाइन कर सकते हैं; Vue असाइनमेंट का पता लगाएगा और फिर सरणी और उसमें निहित हर चीज का पुनरावर्ती निरीक्षण करेगा।

const data = []

for (let y = 0; y < Y_MAX; y++) {
  data[y] = []

  for (let x = 0; x < X_MAX; x++) {
    data[y][x] = { presentation: '...' }
  }
}

// After this assignment, data (and all objects contained within it)
// will be observable
state.table.data = data
1
Decade Moon 9 अगस्त 2019, 15:45

ऐसा लगता है कि आपका प्रॉप्स एक सरणी है। क्या आप सुनिश्चित हैं कि this.x और this.y आपकी प्रस्तुति पद्धति के अंदर सही मान लौटाते हैं?

0
iepure 9 अगस्त 2019, 10:09