官网链接🔗：https://pinia.vuejs.org/introduction.html

一、 什么是pinia？ /piːnjʌ/

它是最新一代的轻量级状态管理插件，相似于vuex。

二、 应用场景

vue3.0+ts+vite+pinia = 🚀

三、用法

1. 安装

yarn add pinia
# or with npm
npm install pinia

2. 全局注册

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')

3. 通过defineStore来简单创建一个存储管理

import { defineStore } from 'pinia'

// useStore could be anything like useUser, useCart
// the first argument is a unique id of the store across your application
export const useStore = defineStore('main', {
  // other options...
})

4. 应用

import { useStore } from '@/stores/counter'

export default {
  setup() {
    const store = useStore()

    return {
      // you can return the whole store instance to use it in the template
      store,
    }
  },
}

四、优点

1. 简便，存储和组件变得很类似，你可以轻松写出优雅的存储。
2. 类型安全，通过类型推断，可以提供自动完成的功能。
3. vue devtools 支持，可以方便进行调试。
4. Pinia 支持扩展，可以非常方便地通过本地存储，事物等进行扩展。
5. 模块化设计，通过构建多个存储模块，可以让程序自动拆分它们。
6. 非常轻巧，只有大约 1kb 的大小。
7. 服务器端渲染支持