state、getter和actionActions支持同步和异步Composition api我们先快速创建一个空项目，再安装Pinia:
npm install pinia
虽然Pinia支持vue2，但如果你使用的vue版本低于Vue2.7,还需独立安装composition api: @vue/composition-api （这里建议直接升到Vue2.7，相较于Vue3来说，跨度不会太大，但对Vue的生态支持的更好）
在main.ts中对Pinia进行引入：
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
const app = createApp(App)
app.use(createPinia())
app.mount('#app')
接着，我们在src/store中创建counter.ts，并写下基础模板：
import { defineStore } from "pinia";
export const mainStore = defineStore('main', {
state: () => {
return {
helloWord: 'HelloWorld'
}
},
getters: {
},
actions: {
}
})
https://pinia.vuejs.org/zh/core-concepts/#setup-stores
为实现更多高级用法，你甚至可以使用一个函数(与组件 setup() 类似)来定义一个 Store：
import { ref } from "vue";
import { defineStore } from "pinia";
export const mainStore = defineStore('main', ()=>{
const helloWord = ref('HelloWorld')
return {
helloWord
}
})
创建好仓库mainStore(仓库名)后，我们将在组件中进行使用
<template>
<div class="">{{ store.helloWord }}</div>
</template>
<script lang="ts" setup>
import { mainStore } from "../store/counter";
const store = mainStore();
</script>
<style scoped></style>
当页面显示出helloWorld后，则说明store创建成功