web-dev-qa-db-fra.com

le magasin vuex ne met pas à jour le composant

Je suis nouveau à vue, donc je fais probablement une erreur de débutant.

J'ai un élément racine 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);

Utilisation de ce modèle

<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>

Mon magasin est très simple store/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));
    }
}
});

Dans mon devtool vuex, je peux voir que la boutique est en cours de mise à jour https://www.screencast.com/t/UGbw7JyHS

mais mon composant n'est pas mis à jour: https://www.screencast.com/t/KhXQrePEd

Question:

Je peux voir dans les devtools que mon code fonctionne. Le magasin est mis à jour avec des données. Cependant, mon composant n'est pas mis à jour. J'ai pensé qu'il suffisait simplement d'ajouter ceci dans la propriété data du composant:

data: {
    productList: store.state.productlist
}

mais apparemment, l'objet de données ne semble pas être automatiquement synchronisé avec le magasin. Donc soit je fais un vue non-non quelque part, soit je dois modifier un peu le code. Quoi qu'il en soit, quelqu'un peut-il m'aider dans la bonne direction.

Merci beaucoup.

javascriptvuex
16
Martin Kure

MISE À JOUR

Je l'ai compris moi-même. Il suffit de remplacer la partie données des composants par une méthode calculée:

les données:

data: {
  productList: store.state.productlist
}

et remplacez-le par.

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

les données ne fonctionnent qu'une seule fois sur le composant avant le rendu, vous pouvez donc utiliser le calcul à la place. comme la réponse ci-dessus, ou vous pouvez utiliser mapstate

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

Tout d'abord - utilisez getter pour faire cela mapGetters, vous devez également regarder cette propriété d'une manière ou d'une autre, vous pouvez définir l'abonnement au magasin ou simplement avec le composant de méthode de surveillance.

 this.$store.subscribe((mutation, state) => {    
   if (mutation.type === 'UPDATE_DATA') {
      ...
   }
 }
2
Lukas