前言
如果你之前使用过 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>
更多学习视频学习资料请参考：B站搜索“我们一起学前端”
