【玩转全栈】---- Pinia 组件状态管理器
【玩转全栈】---- Pinia 组件状态管理器
Pinia 介绍
Pinia 是一个用于 Vue 3 的状态管理库，旨在提供更加简洁、直观且灵活的状态管理模式。它由 Vue 官方团队成员开发，以其轻量级和高性能著称。Pinia 支持 Vue 3 的组合式 API，并允许开发者以一种更自然的方式组织和共享应用状态。与 Vuex 不同，Pinia 去除了复杂的概念如模块嵌套，转而采用扁平化的 store 结构，使得代码更加清晰易懂。此外，Pinia 还支持 TypeScript，提供了优秀的类型推断能力，增强了开发体验。通过 Pinia，你可以轻松地创建多个独立的 store 模块，每个模块都可以拥有自己的 state（状态）、getters（计算属性）、actions（方法）等，极大地简化了复杂应用中的状态管理。其灵活性还体现在对插件系统的良好支持，可以方便地扩展功能。总的来说，Pinia 是现代 Vue 应用中进行状态管理的理想选择。
中文文档：
Pinia 使用参考：
Pinia使用state、getters、actions_WEB前端_前端课程_前端学习路线_小鹿线
Pinia-counter基础使用_哔哩哔哩_bilibili
基本配置
下载 Pinia(基于vue3)，终端输入下载命令：
cnpm install pinia配置 pinia ，打开 main.js ，先引入 pinia：import { createPinia } from 'pinia'，创建 pinia ：const pinia = createPinia() ，应用 pinia：app.use(pinia)，完整配置代码：
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import { createPinia } from 'pinia'
const pinia = createPinia()
createApp(App).use(pinia).mount('#app')创建Pinia
我这里基于 vue3 组合式 API 编写，这要方便得多：
import { defineStore } from 'pinia'
import {ref} from 'vue'
export const useAlertsStore = defineStore('storePinia', ()=>{
const money = ref(0)
function addMoney(){
money.value++
}
return {money,addMoney}
})可以看到，里面的属性、方法的定义和 vue3 中组件中一样，这里的 useAlrtsStore 是store名称，可供其他组件调用 store时使用，storePinia 是一个名字，后面的回调函数用于编写需要共享的数据，别忘了进行返回。
使用 Pinia
在组件中引入刚才创建的 useAlertsStore ，注意，如果你用的命名导出（即向我示例那样 export const useAlertsStore），组件引人需要加大括号：
import { useAlertsStore } from './store/counter.js';而如果是默认导出，类似于这样：
const counter = {
increment: () => { /* ... */ },
decrement: () => { /* ... */ }
};
export default counter;则无需加大括号。
引入后创建一个状态管理 store 实例：
const store = useAlertsStore();将 store 当作正常实例化对象使用即可：
<span>我现在有{{ store.money }}元</span>
<button @click="store.addMoney"></button>Pinia 三大方法
state
写法稍有不同：
export const useAlertsStore = defineStore('storePinia', {
state:()=>{
return{
money:0,
name:"谭",
isMan:true,
items:[]
};
},
actions:{
addMoney(){
this.money ++;
}
}
})actions 中定义的方法。
如果想要页面数据重置的话，可以通过 .$reset() 方法实现：
<button @click="store.$reset">重置</button>当然，也不是只能在 counter.js 中编写函数，也可以在外部组件中添加方法，通过 $reset() ，将方法更新到 counter.js 中：
<button @click="store.$patch({money:100})">修改money</button>当然，此方法不是修改整个对象，而是仅仅修改对象中相对应的属性，当你点击该按钮时，其他属性并不会变化。
getters
getters 相当于 Computed 计算方法：
counter.js:
export const useAlertsStore = defineStore('storePinia', {
state:()=>{
return{
money:0,
name:"谭",
isMan:true,
items:[]
};
},
actions:{
addMoney(){
this.money ++;
}
},
getters:{
doubleMoney:(state)=>state.money * 2,
doblePlusOne(){
return this.doubleMoney + 1;
}
}
})App.vue：
<template>
<span>我现在有{{ store.money }}元</span>
<button @click="store.addMoney">+</button>
<button @click="store.$reset">重置</button>
<span>getters数据:{{ store.doubleMoney }}元</span>
<span>getters加1:{{ store.doblePlusOne }}元</span>
<button @click="store.$patch({money:100})">修改money</button>
<div id="cesiumContainer"></div>
</template>当点击按钮，Getters 中的对应函数会执行，得到计算过的数据。
actions
actions 非常简单，就相当于定义函数的地方。
当然，以上写法是基于选项式 API 的写法，还是比较繁琐的，使用组合式 API 代码如下：
export const useAlertsStore = defineStore('storePinia', ()=>{
const money = ref(0);
const name = "谭";
const isMan = true;
const items = [];
function addMoney(){
money.value++
}
const doubleMoney = computed(()=>{
return money.value * 2;
});
const doblePlusOne = computed(()=>{
return this.doubleMoney + 1;
});
return {money,addMoney}
})这将简洁得多。
感谢观看！！！
腾讯云开发者
