---
title: pinia
tags: vue
---

# 安裝

npm i pinia

# 啟用

import { createApp } from 'vue';
import App from './App.vue';
import { createPinia } from 'pinia';

const app = createApp(App);
app.use(createPinia);
app.mount('#app');

# 定義store

import { defineStore } from 'pinia';
import { ref } from 'vue';

export const useUserStore = defineStore('user', () => {
  const counter = ref(123);
  const add = () => {
    counter.value += 1;
  };

  return { counter, add };
});

# 使用store

<template>
  <h1>msg: {{ store.counter }}</h1>
  <div>
    <button @click="add">click</button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useUserStore } from './store/userstore';
const store = useUserStore();
const add = () => {
  store.add();
};
</script>