web-dev-qa-db-ja.com

vuexストアがコンポーネントを更新しない

私はvueを始めたばかりなので、おそらく新人のエラーを犯しています。

ルートがありますvue element-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>

私のストアは非常にシンプルな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));
    }
}
});

私のvuex devtoolで、ストアが更新されていることがわかります https://www.screencast.com/t/UGbw7JyHS

しかし、私のコンポーネントは更新されていません： https://www.screencast.com/t/KhXQrePEd

質問：

Devtoolsから、コードが機能していることがわかります。ストアはデータで更新されています。しかし、私のコンポーネントは更新されていません。これをコンポーネントのdataプロパティに追加するだけで十分だと思いました。

data: {
    productList: store.state.productlist
}

しかし、どうやらデータオブジェクトはストアと自動的に同期されていないようです。だから私は完全なvue no-noをどこかに行っているか、コードを少し調整する必要があります。とにかく誰でも正しい方向に私を助けることができます。

どうもありがとう。

javascriptvuex
16
Martin Kure

[〜＃〜]更新[〜＃〜]

自分で考え出した。コンポーネントのデータ部分を計算されたメソッドに置き換えるだけでした：

データ：

data: {
  productList: store.state.productlist
}

と交換してください。

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

データはレンダリング前にコンポーネントで1回だけ機能するため、代わりにComputedを使用できます。上記の回答のように、またはmapstateを使用できます

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

最初に、これを行うためにgetterを使用しますmapGetters。また、このプロパティを何らかの方法で監視する必要があります。ストアサブスクリプションを設定するか、コンポーネントのwatchメソッドを使用します。

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