用Setup API来写Pinia.js

0.写在前面

• 本教程使用基于Vue.js 3项目来讲解

1.安装

参考官网安装

yarn add pinia
# or with npm
npm install pinia

2.导入

在main.js或main.ts导入Pinia.js

import { createPinia } from 'pinia'

app.use(createPinia())

3.新建Store

先在src文件夹中创建store文件夹
新建index.ts或index.js文件，本教程使用ts

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


export const useMainStore = defineStore('main', () => {
  // 就像写script setup一样来写store
  const count = ref(1)
  const increment = ():void => {
    count.value++;
  }

  return { count, increment }
})

4.使用Store

在App.vue