pinia with importmaps

by ksoncan34

HTML

<script type="importmap">
  {
    "imports": {
      "pinia": "https://cdn.jsdelivr.net/npm/pinia/dist/pinia.esm-browser.js",
      "vue-demi": "https://cdn.jsdelivr.net/npm/vue-demi/lib/v3/index.mjs",
      "@vue/devtools-api": "https://cdn.jsdelivr.net/npm/@vue/devtools-api/lib/esm/index.js",
      "vue": "https://cdn.jsdelivr.net/npm/vue/dist/vue.esm-browser.prod.js"
    }
  }
</script>

JavaScript

// just needed for jsfiddle to detect module import
import * as vue from 'vue';

import {
  createPinia,
  defineStore
} from 'pinia';

import {
  createApp,
  h,
  ref,
} from 'vue';


const useCalcStore = defineStore('my', () => {
  const myStore = useMyStore();
  const countTimesTwo = computed(() => {
    return myStore.count * 2;
  });
  return {
    countTimesTwo,
    countTimesThree() {
    	return myStore.count * 3;
    }
  }
})

const useMyStore = defineStore('my', () => {
  const count = ref(1)
  return {
    count,
    increment() {
      count.value++;
    }
  }
})


const app = createApp({
  setup() {
    const store = useMyStore();

    return () => h('button', {
      'onClick': store.increment
    }, 'Count ' + store.count)
  }

}).use(createPinia())

app.mount(document.body)