如何将 vue.js 数据同步到全局 javscript 变量

Question

我目前正在使用 two.js 和 vue.js 开发一个应用程序。

当我单击 3D 模型时，会触发一个函数，其中模型的单击部分的名称设置在变量 "name" 中，然后该变量应由 vue.js 渲染。

在页面加载上，本例中的“name”的初始值HELLO被渲染。但是，当我单击模型时，vue.js 中的变量 "name" 会更新，但数据变量 "property" 不会更新。

我如何获得对此示例的反应？

JavaScript 部分：

var name = "HELLO". //defined as global variable


[...]

// Handling of click event in three.js

if (intersects.length > 0) {for(i = 1; i <= 6; i++) {
   if(intersects[ 0 ].object.name == 'K' + i ) { 
       //functions for specific parts are wrapped in an object to enable function call based on variable 'i'
      foo['K_' + i]('K' + i);         
}}

var foo = {
    K_1: function(i) {
         name = "foo_ " + i;
    },

    K_2: function() {},
    ...
}

vue.js 部分：

const app = Vue.createApp ({
    data() {
        return {
            property: name // object key "property" is set to var "name"
        }
    },

template: 
    `<h1> {{ property }} </h1>`
})

app.mount('#app')

Answer 1

要触发 vue 的反应性，您必须使用 ref：

const { ref, createApp  } = Vue;
var name = ref("HELLO");

var foo = {
  K_1(i) {
    name.value = "foo_ " + i;
  },
};

//the vue app:

createApp ({
  setup: () => ({ property: name })
  template: `<h1> {{ property }} </h1>`
}).mount('#app')
    

注意：您可以将多个 ref 分组到一个 reactive 对象中，以减少样板：

const { reactive, toRefs, createApp } = Vue;
const store = reactive({
  name: 'HELLO'
  someOtherProp: 'whatever',
  yetAnotherReactiveProp: null // you got the picture
})

var foo = {
  K_1(i) {
    store.name = "foo_ " + i;
    //      ☝️ no need for `.value` in `reactive`; only in `ref`
  },
  changeSomeOtherProp(val) {
    store.someOtherProp = val;
  }
}
createApp ({
  setup: () => ({ ...toRefs(store) })
  template: `<h1> {{ { name, someOtherProp, yetAnotherReactiveProp } }} </h1>`
}).mount('#app')