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,
  computed,
  ref,
} from 'vue';



const useMyStore = defineStore('my', () => {
  const count = ref({
   	items : []
  })
  
  function getCount() {
  	return count.value;
	}
  
  const countComputed = computed(() => {
      return count.value;
    });
    
  
  return {
    count,
    increment() {
      count.value.items.push(1);
    },
    getCount,
    countComputed
  }
})


const app = createApp({
  setup() {
    const store = useMyStore();
    debugger;
    const countLength = computed(() => {    
    	return store.count.items.length;
    });
    const countLengthFunction = computed(() => {
    	return store.getCount().items.length;
    });
    const countLengthComputed = computed(() => {
    	return store.countComputed.items.length;
    });
    

    return () => 
     h('div', {}, [
      h('button', {
        'onClick': store.increment
      }, 'Count ' + countLength),
      h('br'),
      'Count2'  + countLengthFunction,
      h('br'),
      'Count3'  + countLengthComputed
    ])
  }

}).use(createPinia())

app.mount(document.body)