Access or modify petite-vue data outside app-CodePudding

I'm using petite-vue as I need to do very basic UI updates in a webpage and have been drawn to its filesize and simplicity. I'd like to control the UI's state of visible / invisible DOM elements and class names and styles of various elements.

I have multiple JavaScript files in my app, I'd like to be able to make these changes from any of them.

In Vue JS it was possible to do things like this...

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

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

I'm trying the same with Petite Vue but it does nothing.

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

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

Logging the app gives just a directive and mount attribute, I can't find the count (nb if you log the above app it will show the count, because of that line petiteVueApp.count = 2, that isn't the data)

Demo: https://codepen.io/EightArmsHQ/pen/YzemBVB

Can anyone shed any light on this?

CodePudding user response：

There is an example which does exactly this in the docs which I overlooked.

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

It requires an import of the @vue/reactivity which can be imported from the petite-vue 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);

Updated working example:

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