组件中的Vuejs3React式阵列

fumotvh3  于 2023-03-31  发布在  Vue.js
关注(0)|答案(3)|浏览(133)

我尝试在元件中使用电抗阵列。
它只对一个对象起作用,而对一个对象数组不起作用。
如何在数组更新时更新视图?

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>'
};
....
dnph8jn4

dnph8jn41#

根据官方文件:

一月一日:

获取一个对象并返回原始对象的响应式代理。这相当于2.x的Vue.observable()
....
React性转化是“深”的:它会影响所有嵌套的属性。在ES2015基于Proxy的实现中,返回的代理等于原始对象。建议只使用响应式代理,避免依赖原始对象。
我建议像处理test一样,将数组分配给reactive参数中的字段value:

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

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

wkyowqbh

wkyowqbh2#

两件事:

  • resources: Vue.reactive({value:[]})可以通过使整个存储器React来避免
  • 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>'
};
pepwfjgg

pepwfjgg3#

快捷的方法

const resources = reactive([]);

// set resources
resources.length = 0;
resources.push(...items)

相关问题