Магазин vuex не обновляет компонент

Я новичок в 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>

My store is very 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));
    }
}
});

В моем vuex devtool я вижу, что магазин обновляется https://www.screencast.com/t/UGbw7JyHS3

но мой компонент не обновляется: https://www.screencast.com/t/KhXQrePEd

Вопрос:

По инструментам разработчика я вижу, что мой код работает. Магазин пополняется данными. Однако мой компонент не обновляется. Я думал, что достаточно просто добавить это в свойство данных компонента:

data: {
    productList: store.state.productlist
}

но очевидно, что объект данных не синхронизируется автоматически с хранилищем. Так что либо я где-то делаю полный vue no-no, либо мне нужно немного подправить код. В любом случае может кто-нибудь помочь мне в правильном направлении.

Большое спасибо.


javascript vuex
person Martin Kure    schedule 12.02.2017    source источник

Ответы (4)


arrow_upward
31
arrow_downward

ОБНОВЛЕНИЕ

Разобрался сам. Просто пришлось заменить часть данных компонентов вычисленным методом:

данные:

data: {
  productList: store.state.productlist
}

и замените его на.

computed: {
    productList () {
        return store.state.productlist;
    }
},
person Martin Kure    schedule 12.02.2017
comment
Этот способ задокументирован? - person user2976753; 13.07.2017
comment
Да, я нашел решение в документации: vuex.vuejs.org/en/state.html < / а> - person Martin Kure; 20.07.2017
comment
Нужно ли его заменять? Или мы можем оставить и data, и computed - person Abdullah Khan; 15.12.2017
comment
Да, вы можете использовать оба, как этот пример из документации Vue: vuejs.org/v2/guide/computed .html. Он используется в примере, чтобы избежать больших выражений в операторе {{}}. - person Enrique René; 04.03.2020
comment
Я забыл добавить state между store и productlist. Благодарность @MartinKure! - person TD1; 01.12.2020

arrow_upward
4
arrow_downward

данные работают с компонентом только один раз перед рендерингом, поэтому вместо этого вы можете использовать вычисленные. как и выше, или вы можете использовать mapstate

import {mapstate} from 'vuex'
...
computed: mapstate({
  productList: state => state.productList
})
person masongzhi    schedule 27.07.2017
comment
Теперь это mapState с большой буквы S. - person user1502723; 16.09.2017

arrow_upward
3
arrow_downward

Во-первых - используйте для этого геттер mapGetters, также вам нужно как-то следить за этим свойством, вы можете установить подписку на магазин или просто с помощью компонента метода наблюдения.

 this.$store.subscribe((mutation, state) => {    
   if (mutation.type === 'UPDATE_DATA') {
      ...
   }
 }
person Lukas    schedule 16.03.2018
comment
хм .. интересно. Но где подписаться на изменения? В компоненте в mounted()? - person Sebastien D; 16.03.2018
comment
правильный способ - использовать его в created() хуке, но думаю, что в mounted тоже будет работать - person Lukas; 16.03.2018

arrow_upward
-2
arrow_downward

Вы неправильно вызываете магазин в свойство данных productList.

Можешь попробовать:

data: {
  productList: $store.state.productlist
}

В противном случае вам придется импортировать хранилище в каждый компонент, который использует хранилище.

person Thiago Fazzi    schedule 30.05.2020