vuex store घटक

Question

अद्यतन नहीं करता है मैं vue के लिए नया हूं, इसलिए मैं शायद एक रूकी त्रुटि बना रहा हूं।

मैं एक रूट Vue तत्व है - raptor.js:

const Component = { 
el: '#app', 
store, 
data: { 
    productList: store.state.productlist 
}, 
beforeCreate: function() { 
    return store.dispatch('getProductList', 'getTrendingBrands'); 
}, 
updated: function(){ 
    console.log(111); 
    startSlider(); 
} 
}; 
const vm = new Vue(Component); 

इस टेम्पलेट

<div class="grid-module-single popular-products" id="app"> 
<div class="row"> 
    <div class="popular-items-slick col-xs-12"> 
     <div v-for="product in productList"> 
      ... 
     </div> 
    </div> 
</div> 

का उपयोग

मेरे दुकान बहुत ही सरल की दुकान/index.js है:

import Vue from 'vue'; 
import Vuex from 'vuex'; 
import model from '../../utilities/model'; 

Vue.use(Vuex); 

export default new Vuex.Store({ 
state: { 
    productlist: [] 
}, 
mutations: { 
    setProductList(state, data) { 
     state.productlist = data; 
    } 
}, 
actions: { 
    getProductList({ commit }, action) { 
     return model.products().then(data => commit('setProductList', data)); 
    } 
} 
}); 

मेरे vuex devt में ool, मैं देख सकता, उस दुकान https://www.screencast.com/t/UGbw7JyHS3

अद्यतन किया जा रहा है, लेकिन मेरे घटक अद्यतन किया जा रहा है: https://www.screencast.com/t/KhXQrePEd

प्रश्न:

मैं DevTools से देख सकते हैं, कि मेरे कोड काम कर रहा है। स्टोर डेटा के साथ अद्यतन किया जा रहा है। हालांकि, मेरा घटक अद्यतन नहीं किया जा रहा है। मैंने सोचा कि यह घटक पर डेटा संपत्ति में जोड़ने के लिए पर्याप्त बस गया था:

data: { 
    productList: store.state.productlist 
} 

लेकिन जाहिरा तौर पर डेटा ऑब्जेक्ट स्वचालित रूप से दुकान के साथ समन्वयित नहीं प्रतीत नहीं होता। तो या तो मैं कहीं भी एक पूर्ण vue नहीं कर रहा हूँ, या मुझे थोड़ा सा कोड tweak करने की जरूरत है। वैसे भी कोई भी मुझे सही दिशा में मदद कर सकता है।

बहुत बहुत धन्यवाद।

Answer 1

अद्यतन

अपने आप को यह पता चल। बस एक गणना विधि के साथ घटकों डेटा भाग को बदलने के लिए किया था:

डेटा:

data: { 
    productList: store.state.productlist 
} 

और साथ बदलें।

computed: { 
    productList() { 
     return store.state.productlist; 
    } 
}, 

Answer 2

डेटा केवल प्रस्तुत करने से पहले घटक पर एक बार काम करता है, इसलिए आप इसके बजाय गणना का उपयोग कर सकते हैं। उपरोक्त उत्तर की तरह, या आप Mapstate

import {mapstate} from 'vuex' 
... 
computed: mapstate({ 
    productList: state => state.productList 
})