Vue3 Store

ApplicationStore.js

import { reactive } from 'vue';

function ApplicationStore(app) {
  const store = {
    state: reactive({
        // Add new store fields here
        totalCents: 100,
    }),

    // Methods to act on the store 
    totalDollars() {
      return parseInt(this.state.totalCents, 10) / 100;
    },
  
    setState(key, value) {
      if (this.debug) {
        console.log(`Attempting to set value of '${key}'='${value}`);
      }
      this.state[key] = value;
    }
  
  }

  return store;
}

export default {
  install: (app) => {
    app.config.globalProperties.$store = ApplicationStore(app);
  }
}

ExampleUse.js

// Available app wide
// You can now use this.$store
// Properties will updates ina reactive manner
// Methods will need to be assigned to computed vars or watchers at the component level

this.$store.state.totalCents;

this.$store.totalDollars();

this.$store.setState('foo', 'bar');

main.js

import { createApp } from 'vue'
import App from '@/App.vue'
import ApplicationStore from '@/ApplicationStore';

createApp(App).use(ApplicationStore).mount('#app');