官网链接🔗：https://pinia.vuejs.org/introduction.html
一、 什么是pinia？ /piːnjʌ/
它是最新一代的轻量级状态管理插件，相似于vuex。
二、 应用场景
vue3.0+ts+vite+pinia = 🚀
三、用法
- 安装
yarn add pinia
# or with npm
npm install pinia
- 全局注册
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')
- 通过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...
})
- 应用
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,
}
},
}
四、优点
- 简便，存储和组件变得很类似，你可以轻松写出优雅的存储。
- 类型安全，通过类型推断，可以提供自动完成的功能。
- vue devtools 支持，可以方便进行调试。
- Pinia 支持扩展，可以非常方便地通过本地存储，事物等进行扩展。
- 模块化设计，通过构建多个存储模块，可以让程序自动拆分它们。
- 非常轻巧，只有大约 1kb 的大小。
- 服务器端渲染支持
