官网：https://pinia.web3doc.top/
前言
如果你之前使用过 vuex 进行状态管理的话，那么 pinia 就是一个类似的插件。它是最新一代的轻量级状态管理插件。按照尤雨溪的说法，vuex 将不再接受新的功能，建议将 Pinia 用于新的项目。
读音：皮尼亚
特点（与vuex）
1.简单很多（看下面的使用）
? 三个概念，state、getters?和?actions?并且可以安全地假设这些概念等同于组件中的“数据”、“计算”和“方法”
2.提供了 Composition-API 风格的 API
3.在与 TypeScript 一起使用时具有可靠的类型推断支持
总之：1.更简单 2.对vue3支持更好
?
使用
?
1.初始化项目
vue create demo
2.安装
npm install pinia
3.在 main.js 中 加入
import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia'? //导入pinia
const? pinia = createPinia();? ? ? ? //调用创建pinia
createApp(App)
.use(pinia)
.mount('#app')
4.去创建 pinia 仓库
import {defineStore} from 'pinia';
export const PiniaStore = defineStore('store',{? ?
? ? ? ? state(){? ? ? ? //相当于全局的 data()
? ? ? ? ? ? ? return {? ? ? ? ? ? name:"小王",? ? ? ? ? ? age:20? ? ? ? }? ?
? ? ? ? },? ?
? ? ? ? getters:{? ? ? ?//相当于全局的computed
? ? ? ? ? ?? descript(state){? ? ? ? ? ? return `我叫${state.name},今年${state.age}岁`? ? ? ?}? ?
? ? ? ?? },? ?
? ? ? ? actions:{? ? ? ?//相当于全局methods
? ? ? ? ? ?? addAge(){? ? ? ? ? ? this.age++;? ? ? ? }? ?
? ? ? ? }
})
5.vue2.0使用
<template>?
? ? ?? <div id="app">? ?
? ? ?? <div>{{storeData.name}}</div>? ?
? ? ? ? <div>? ? ? {{storeData.descript}}? ? </div>? ?
? ? ?? <div>? ? ? {{storeData.age}}? ? </div>? ?
? ? ? <button type="" @click="storeData.age++">年龄+1</button>? ?
? ? ?? <button type="" @click="storeData.addAge">年龄+1</button>??
? ?? </div>
</template>
<script>
? ? ?? import {PiniaStore} from './store/index.js'
? ? ?? export default {?
? ? ? ? ? ? ?? name: 'App',?
? ? ? ? ? ? ? ? components: {? },?
? ? ? ? ? ? ? ? data(){? ?
? ? ? ? ? ? ? ?? return {? ? ?
? ? ? ? ? ? ? ? ? ? ?? storeData:{}? ?
? ? ? ? ? ? ? ? }?
? ? ? ? ? },?
? ? ? ? ? ? ? ? created(){? ? this.storeData = PiniaStore();? }}
? </script>
6.vue3.0使用
<template>?
? ? ? ? <div>? ?
? ? ? ? ? ? <div>? ? ? {{piniaData.name}}? ? </div>? ?
? ? ? ? ? ? <div>? ? ? {{piniaData.descript}}? ? </div>? ?
? ? ? ? ? ? <div>? ? ? {{piniaData.age}}? ? </div>? ?
? ? ? ? ? ? <button @click="piniaData.age++">年龄+1</button>? ?
? ? ? ? ? ? <button @click="piniaData.addAge">年龄+1</button>?
</div></template>
<script >import {PiniaStore} from './store/index.js'
? ? ? ? export default {?
? ? ? ? ? ?? setup(){? ? ?
? ? ? ? ? ? ? ? ? ?? let piniaData ?= PiniaStore();? ? ?
? ? ? ? ? ? ? ? ?? return {? ? ? ? piniaData? ? ?}?
? ? ? ? ? ?? }
? ? ?? }
</script>
更多同步资料请参考↓↓↓
?