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

Question

我目前正在处理 three.js 和 vue.js 的应用程序。

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

在 pageload 上 "name" 的 inital 值在本例中 HELLO 被渲染。但是当我点击模型时，变量 "name" 得到更新但数据变量 "属性" in [=45] =].

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

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')

注意：您可以将多个引用组合到一个 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')

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

How to sync vue.js data to global javscript variable

javascript

vue.js

vue-reactivity