关于vue.js:用Setup-API来写Piniajs

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<number>(1)
  const increment = ():void => {
    count.value++;
  }

  return { count, increment }
})

4.应用Store

在App.vue

<template>
  <div>
    count: {{ count }}
    <button @click="increment()">increment</button>
  </div>
</template>

<script lang="ts" setup>
import { storeToRefs } from 'pinia'
import { useMainStore } from '@/store/index'

// hooks一样来应用
const useMainStore = useMainStore()
const { count, increment } = storeToRefs(useMainStore)

// vue外面也能够间接改
count.value = 0
</script>