十三 分分钟学会 vue3中使用Pinia

1. 什么是Pinia

Pinia 是 Vue 的专属状态管理库，它允许你跨组件或页面共享状态，类似Vuex

2. 如何使用Pinia

（1）. 安装Pinia

yarn add pinia 

# 或者使用 npm 

npm install pinia

（2）创建一个 pinia 实例 (根 store) 并将其传递给应用

import './assets/main.css'

import { createApp } from 'vue'
// 引用pinia
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'

const app = createApp(App)

// 创建一个 pinia 实例 (根 store) 并将其传递给应用
app.use(createPinia())
app.use(router)

app.mount('#app')

（3）创建子store

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

// 使用defineStore创建仓库
// 第一个参数是你的应用中 Store 的唯一 ID
export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  const doubleCount = computed(() => count.value * 2)
  function increment() {
    count.value++
  }

  //  将定义好的变量和方法暴露出去
  return { count, doubleCount, increment }
})

（4）使用store

<template>
  <div class="about">
    我是store中的数据
    <div>count: {{ count }}</div>
    <div>doubleCount: {{ doubleCount }}</div>
    <div><button @click="changeData">点击修改store中的数据</button></div>
  </div>
</template>

<script setup lang="ts">
import { storeToRefs } from 'pinia'
import { useCounterStore } from '@/stores/counter'

// 使用pinia定义的store
const store = useCounterStore()

// 解构store中的变量 注意需要用storeToRefs包裹后，解构才不会影响数据的响应式
const { count, doubleCount } = storeToRefs(store)

// 解构store中的方法，方法可以直接解构使用
const { increment } = store
const changeData = () => {
  increment()
}
</script>