BonBonSlick
@BonBonSlick
Vanilla Web Architect

Vue watch vuex getter state?

computed: {
        ...mapGetters(
            LISTS,
            {
                isCommentsShown:     `${LIST_POSTS_COMMENTS}/${GET_IS_COMMENTS_SHOWN}`,
            }
        ),
    },
    watch:    {
        isCommentsShown (newVal, old) {
            console.log(1111111111111111111);
        },
    },


/**
     * @param state
     * @param {string} postId
     * @param {Object[]} items
     */
    [MUTATION_TOGGLE_SHOW_COMMENTS] (state, {postId}) {
        if (true === !!state.items[postId]) {
            Vue.set(
                state.items[postId],
                `isCommentsShown`,
                !state.items[postId].isCommentsShown,
            );
        }
    },

[GET_IS_COMMENTS_SHOWN]:            state => ({postId}) => {
        let returnValue = false;
        if (true === !!state.items[postId]) {
            returnValue = state.items[postId].isCommentsShown;
        }
        return returnValue;
    },

watch для isCommentsShown не работает.

toggle обновляет стейт, ui старый.
Знаю что computed кешируются, поетому использовал Vue.set().

https://vuejs.org/v2/guide/computed.html
https://vuejs.org/v2/api/#computed
https://vuejs.org/v2/api/#watch
https://vuejs.org/v2/api/#Vue-set

Что я упустил?
  • Вопрос задан
  • 170 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
У геттера нет зависимостей, вот наблюдатель и не вызывается.

Зачем функция? Собирайте объект, где ключами будут postId, а значениями - соответствующие isCommentsShown. Так ещё и в наблюдателе можно будет увидеть, кто изменился, сравнив старое и новое значения.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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