如何從JS類的Vue組件中隔離數據？

Question

我有一個簡單的JS類，其中在構造函數中初始化字典。 我有更新或刪除此詞典中項目的方法。

export default class Items {
    constructor() {
        this.items = {};
        //Code that adds some values to it
    }
    save(item) {
        this.items[item.id] = item;
    }
    delete(itemId) {
        delete this.items[itemId];
    }
}

我有一個Vue組件，我可以在其中簡單地從該字典輸出值

<p v-for="item in items">{{item}}</p>

在安裝方法中，創建Items對象和分配items字典來可變items從Vue的數據。 從Vue中，我調用保存或刪除方法，我看到Vue數據中的字典items正在更改，但是UI不會更新。 我知道我可以使用Vue.$delete或Vue.$set但是可以將簡單的JS類與Vue隔離並將所有數據保留在JS類中嗎？

我正在使用Vue 2.4.4

Answer 1

嘗試使用VueJs

...

    save(item) {

        Vue.set(this.items, item.id, item);

    }

    delete(itemId) {

    let index = this.items.findIndex(p => p.id === itemId);
    Vue.delete(this.items, index);

    }

Answer 2

是否有理由不讓Vue保留數據？ 這樣便可以對其進行監視，以進行最有效的dom更改。 因此，以適當的Vue樣式，您應將類邏輯移至組件級別，以便數據返回項字典。 然后附加保存和刪除作為組件的方法。

對於對象，只有在編輯渲染時存在的關鍵點時才具有反應性，否則，您需要提醒Vue正在添加關鍵點。 這是通過Vue.set(this.items, item.id, item); 。

如果要將邏輯與組件分開，可以查看vuex，它允許您創建狀態和變異模塊。