Vuex: Mount () и computed () выполняются из одного компонента, мои данные не загружаются в первую очередь?

Question

Я использую action для получения всех продуктов, а затем использую computed метод для того же component для отображения данных. Вот это component:

<template v-for="product in allProducts">
    <div class="ap-table-content">
        {{ product.product_name }}
    </div>              
    <div class="ap-table-content">
        {{ product.code }}
    </div>
</template>

И vue для визуализации allProducts это

export default {

        computed :{
            ...mapGetters([
                'allProducts'
            ]),
        },
        mounted(){
            this.$store.dispatch('fetchAllProducts');
        },

    }

И на моем store.js я установил свой магазин как:

state: {
    allProducts : {}
},
getters: {
    allProducts: state=>{
        return state.allProducts;
    }
},
actions:{

 fetchAllProducts : async({commit, state})=>{
            await axios.get('/products')
                .then(response => {
                    commit('storeProducts', response.data);

                })
                .catch(err => console.log(err));
        },

}

РЕШЕНИЕ: Это был мой мутатор. Я назначал кусок моего массива в объект, не получая state.property, где computed потерял value.

storeProducts(state, data){
             Object.assign(state.allProducts, data);
}

Эта мутация была виновником. Может кто-нибудь дать мне лучший вариант прикрепить данные в штат?

Answer 1

JavaScript - это регистрозависимый язык. Вы пытаетесь использовать метод получения с именем allProducts, но то, что вы объявили в своем магазине getters, равно allproducts, и поэтому ваши данные не отображаются.

Измените свою функцию получения на allProducts вместо allproducts.

getters: {
    allProducts: state=>{
        return state.allProducts;
    }
},

Также я заметил, что вы использовали store: { allProducts: {} } внутри вашего модуля вместо state.

Это нормально, если вы экспортируете его как state позже, но если нет, то вы должны изменить его на state: { allProducts: {} }