Обнаружение объекта состояния Vuex в Typescript Vue

Question

Я пытаюсь создать простую систему тележек в качестве моей первой практики VueJS.Я начинаю этот проект с @vue/cli с Typescript и Vuex и классом style-component.Прямо сейчас я застрял в обнаружении изменения объекта состояния.Состояние действительно обновлено, но мой компонент не перерисовывается.

Вот мой интерфейс состояния.Очень просто.Ключ - ID товара, Val - сумма, добавленная в корзину.

interface CartItem {
    [key: string]: number;
}

Вот мой шаблон

<template v-for="book in productLists.books">
     <div class="cart-controller">
         <button @click="addToCart(id)">-</button>                            
     </div>
     <div class="item-in-class">{{ getAmountInCart(book.id) }} In Cart</div>
</template>

У меня есть только одна кнопка, которая используется для добавления товара в корзину.Позже, после добавления, он должен обновить содержимое div.item-in-class, указав номер элемента, добавленного в корзину.

Вот мои компоненты

<script lang="ts">
import { Vue, Component, Watch } from 'vue-property-decorator';
import { ACTION_TYPE as CART_ACTION_TYPE } from '@/store/modules/cart/actions';
import { ACTION_TYPE as PRODUCT_ACTION_TYPE } from '@/store/modules/product/actions';

@Component
export default class BooksLists extends Vue {

    private cart = this.$store.state.cart;

    @Watch('this.cart') // try to use watch here, but look like it doesn't work
    oncartChange(newVal: any, oldVal: any){
        console.log(oldVal);
    }

    private mounted() {
        this.$store.dispatch(PRODUCT_ACTION_TYPE.FETCH_BOOKS);    
    }

    private getAmountInCart(bookId: string): void {
        return this.cart.items && this.cart.items[bookId] || 0;
    }

    private addToCart(bookId: number) {
        this.$store.dispatch(CART_ACTION_TYPE.ADD_TO_CART, bookId);
        console.log(this.cart);
    }
}
</script>

ОБНОВЛЕНИЕ 1

мое действиетоже просто.Получите только itemId и совершите мутацию.

Действие

const actions: ActionTree<CartState, RootState> = {
    [ACTION_TYPE.ADD_TO_CART]({ commit }, item: CartItem): void {
        commit(MUTATION_TYPE.ADD_ITEM_TO_CART, item);
    },
};

Мутация

const mutations: MutationTree<CartState> = {
    [MUTATION_TYPE.ADD_ITEM_TO_CART](state: CartState, payload: number): void {
        if (state.items[payload]) {
            state.items[payload] += 1;
            return;
        }
        state.items[payload] = 1;
    },
};

Answer 1

Для того, чтобы изменение вступило в силу, вам необходимо обновить его следующим образом:

tempVar = state.items
tempVar['payload'] += 1;
state.items = Object.assign({}, tempVar)

Или

Vue.$set(state.items,'payload',1)
Vue.$set(state.items,'payload',state.items['payload']+1)

для получения более подробной информации см. https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats