常識的には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>
オチはない
堕ちたな