在应用程序外访问或修改petite-vue数据

2ledvvac 于 2023-01-17 发布在 Vue.js

关注(0)|答案(2)|浏览(201)

我使用petite-vue是因为我需要在网页上做一些非常基本的UI更新，并且被它的文件大小和简单性所吸引。我想控制UI的可见/不可见DOM元素的状态以及各种元素的类名和样式。
我的应用程序中有多个JavaScript文件，我希望能够从其中任何一个文件进行这些更改。
在Vue JS中可以做这样的事情...

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

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

我尝试了同样的Petite Vue，但它什么也没做。

// 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
有人能解释一下吗？

vue.js

来源：https://stackoverflow.com/questions/72752587/access-or-modify-petite-vue-data-outside-app

2条答案

按热度按时间

7gcisfzg1#

在我忽略的文档中有一个例子就是这样做的。
https://github.com/vuejs/petite-vue#global-state-management
它需要导入@vue/reactivity，该值可以从petite-vue包中导入。

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

赞(0）回复(0）举报 2023-01-17

5lhxktic2#

有趣。看源代码，我们似乎希望它是return ctx.scope而不是return this。
如果按照给定的方式使用petite-vue，您的变通方案似乎是最佳选择，或者您可以派生petite-vue并更改那一行（我还没有测试过）。

赞(0）回复(0）举报 2023-01-17