BonBonSlick
@BonBonSlick
Vanilla Web Architect

Computed is not updated when state changed?

Я знаю что computed cached, и будут изменены когда state будет изменен, однако у меня почему то стейт обновлен, а computed остаеться старым.
Вот куски кода, весь код выложить не выйдет, слишком много.

const state = () => {
  items: [],
};

export default state;

[MUTATION_LOAD_LAST_COMMENTS] (state, {itemLoopIndex}) {
        // @todo - this is dummy data, should come from API
        const randomTrueFalse = Math.floor(Math.random() * 2) + 1;
        const comments = [];
        if (!state.items[`'${itemLoopIndex}'`] && 0 === randomTrueFalse % 2) {
            for (let iterator = 0; iterator < 5; iterator++) {
                comments.push(
                    {
                        id:        iterator,
                        author:    {
                            id:        1,
                            fullName:  'Andrew Stark',
                            avatarUrl: 'https://cdn.vuetifyjs.com/images/lists/2.jpg',

                        },
                        createdAt: iterator + ' hours ago',
                        content:   'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor ' +
                                   'incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation' +
                                   ' ullamco laboris nisi ut aliquip ex ea commodo consequat.',
                    },
                );
            }
        }

        state.items[`'${itemLoopIndex}'`] = comments;
    },
export default mutations;


const getters = {
    [GET_IS_COMMENTS_LOADED]:     state => ({itemLoopIndex}) => {
        return !!state.items[itemLoopIndex];
    },
};

export default getters;

computed: {
        ...mapGetters(
            LISTS,
            {
                isCommentsLoaded: `${LIST_POSTS_COMMENTS}/${GET_IS_COMMENTS_LOADED}`,
            }
        ),
    },

computed отрабатывают только первый раз и выводят false, что вполне логично, кешируются и все. Когда происходит екшен добавления комментариев, computed не вызывается, и UI висит старый, а надо отрисовать комментарии.
Естественно что геттер и екшен из одного модуля и работают с одним стейтом.
State обьявлен методом для реактивности, вот только ее нет.

Повторюсь, state обновлен, комментарии добавлены по нужному индексу, аля dummy ID поста.

По каким причинам это может быть?
Возможно это связано с тем, что список динамический? первый раз когда вызван геттер, он привязан к undefined, ведь юзер еще не кликнул на "загрузить комментарии" для поста, соответственно, undefined Никогда не обновлен, в результате getter закеширован на неопределенности.
  • Вопрос задан
  • 72 просмотра
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
const state = () => {
  items: [],
};

state.items[`'${itemLoopIndex}'`] = comments;

Интересно, а что в документации про такое говорят? Да вот что:

Vue не может отследить следующие изменения в массиве:

1. Прямую установку элемента по индексу: vm.items[indexOfItem] = newValue

Да и в качестве индекса какая-то дичь.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы