访问或修改app外部的小vue数据

Question

因为我需要在网页中进行非常基本的UI更新，所以我使用的是文件大小和简单性。我想控制UI的可见/不可见DOM元素的状态，以及各种元素的类名和样式。

我在我的应用程序中有多个JavaScript文件，我希望能够从它们中的任何一个进行这些更改。

在Vue JS可以做这样的事情..。

const vueApp = new Vue({ el: "#vue-app", data(){
  return { count: 1}
}})

setTimeout(() => { vueApp.count = 2 }, 1000)

我也在对Petite做同样的尝试，但什么也没做。

// Petite Vue
const petiteVueApp = PetiteVue.createApp({
  count: 0,
}).mount("#petite-vue");

setTimeout(() => { petiteVueApp.count = 2 }, 1000);

记录应用程序只提供一个指令和挂载属性，我找不到count (如果您记录上面的应用程序，它将显示计数，因为行petiteVueApp.count = 2，这不是数据)

演示：https://codepen.io/EightArmsHQ/pen/YzemBVB

有人能解释一下这件事吗？

Answer 1

在我忽略的文档中，有一个例子正是这样做的。

https://github.com/vuejs/petite-vue#global-state-management

它需要导入@vue/reactivity，它可以从bundle包中导入。

import { createApp, reactive } from 'https://unpkg.com/petite-vue?module'

setTimeout(() => { vueApp.count = 2 }, 1000)

const store = reactive({
  count: 0,
  inc() {
    this.count++
  }
})

createApp({
  store
}).mount("#petite-vue")

setTimeout(() => { store.count = 2 }, 1000);

更新的工作示例：

https://codepen.io/EightArmsHQ/pen/ExEYYXQ