Vue 的专属状态管理库——Pinia 基础使用方法

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

这篇是Vue3的使用Pinia 方法

一：安装

yarn add pinia
# 或者使用 npm
npm install pinia

main.js

import { createApp } from 'vue'
import { createPinia } from 'pinia'// 第一步
import App from './App.vue'

const pinia = createPinia()// 第二步
const app = createApp(App)

app.use(pinia)// 第三步
app.mount('#app')

二：创建仓库文件

// pinia/counter.js
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => {
    return { count: 0 }
  },
  // 也可以这样定义
  // state: () => ({ count: 0 })
  actions: {
    increment() {
      this.count++
    },
  },
})

三：使用仓库

<script setup>
import { useCounterStore } from '../pinia/counter'
const counter = useCounterStore()
counter.count++  //这里counter+1
// 自动补全！ 
counter.$patch({ count: counter.count + 1 }) //这里counter+1
// 或使用 action 代替
counter.increment() //这里counter+1
</script>
<template>
  <!-- 直接从 store 中访问 state -->
  <div>Current Count: {{ counter.count }}</div>
</template>