Как я могу контролировать глубокое значение в объекте при использовании vuex

Question

Пожалуйста, проверьте этот пример.

https://codepen.io/suedar/pen/XGyGOj

После того, как я нажму li, для отображения требуется div, который не является.

Я знаю, это потому, что Реактивность в глубине . Я хочу знать, как я могу контролировать глубокое значение в объекте при использовании vuex. Спасибо за ваш ответ.

Answer 1

Deep watch должно работать и в магазине Vuex.

import { mapState, mapMutations } from 'vuex';

export default {
  computed: {
    ...mapState([
      'allCategory'
    ])
  },

  methods: {
    ...mapMutations([
      'CHANGE_ALL_CATEGORY'
    ]),

    toggleTab(index, isShow) {
      // ...some action
      this.CHANGE_ALL_CATEGORY(allCategory);
    },
  },

  watch: {
    allCategory: {
      handler(val) {
        this.CHANGE_ALL_CATEGORY(val);
      },
      deep: true
    }
  }
}