組件中的Vuejs3反應式數組

Question

我嘗試在組件中使用反應式數組。
它適用於一個對象，但不適用於一組對象。

數組更新時如何更新視圖？

var self = currentClassInstance // this

self.store = {
    resources: Vue.reactive([]),
    test:  Vue.reactive({ test: 'my super test' }),

    setResources(resources) {
        // this one doesn't update the view. ?
        this.resources = resources

    }, 
    setResources(resources) {
        // this one update the view
        this.test.test = "test ok"
    },  
}


....

const app_draw = {
    data() {
        return {
            resources: self.store.resources,
            test: self.store.test,
        }
    },
       
    updated() {
        // triggered for "test" but not for "resources"
        console.log('updated')
    },
       
    template: '<div v-for="(resource, key) in resources" :data-key="key">{{resource.name}}</div>'
};
....

Answer 1

根據官方文檔：

Reactive ：
獲取一個對象並返回原始對象的反應代理。 這相當於 2.x 的Vue.observable()
....
反應式轉換是“深的”：它影響所有嵌套的屬性。 在基於 ES2015 代理的實現中，返回的代理不等於原始對象。 建議只使用反應式代理，避免依賴原始對象。

我建議將數組分配給反應參數中名為 value 的字段，就像您對test所做的那樣：

resources: Vue.reactive({value:[]}),

然后使用resources.value=someVal更新該值。

Answer 2

兩件事情：

• resources: Vue.reactive({value:[]})可以通過使整個商店反應來避免
• data()是一個本地副本，但你真的想要一個單一的真實來源（即存儲），所以通過計算屬性訪問它（基本上是 Vuex 的工作方式）。

var self = currentClassInstance // this

self.store = Vue.reactive({
  resources: [],
  setResources(resources) {
    this.resources = resources
  }, 
})

const app_draw = {

  computed: {
    resources() {
      return self.store.resources
    }
  }
       
  template: '<div v-for="(resource, key) in resources" :data-key="key">{{resource.name}}</div>'
};