CDN版 Vue3.xでPiniaを動かす #Vue.js

常識的にはvite環境でやるべきなんですが、ちょっとワケありなのでVue3.xのcompositionAPI CDN環境でPinia使います
さすがに危篤すぎてWeb漁っても全くHITしなかったので備忘録代わりに

Piniaの基本的な使い方は他にも沢山記事はあるので割愛

要点

vue-demiが要る
.use(createPinia())する

pinia.html

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <div id="app">
      <span>🍍Pinia!🍍</span>
      <button @click="counter.increment()">
        Count is: {{ counter.count }}
      </button>
    </div>

    <script src="https://unpkg.com/vue@next"></script>
    <script src="https://unpkg.com/vue-demi"></script>
    <script src="https://unpkg.com/pinia"></script>

    <script>
      const { createApp } = Vue;
      const { defineStore, createPinia } = Pinia;

      const useCounterStore = defineStore("counter", {
        state: () => {
          return { count: 0 };
        },
        actions: {
          increment() {
            this.count++;
          },
        },
      });

      const App = {
        setup() {
          const counter = useCounterStore();
          return {
            counter,
          };
        },
      };
      const app = createApp(App);
      app.use(createPinia());
      app.mount("#app");
    </script>
  </body>
</html>

オチはない

堕ちたな