Vue3中状态管理器 ( Pinia ) 详解及使用

传送门： Vue中状态管理器（vuex）详解及应用场景
传送门：Pinia 中文文档

注意：本文项目使用脚手架为 Vite；

1. 前言

Pinia 对比 Vuex

Pinia 同时支持 Vue2 以及 Vue3 ，这让同时使用两个版本的小伙伴更容易上手；
Pinia 中只存在 State，getter，action，剔除掉了 Vuex 中的 Mutation 及 Module；
Pinia 中的 action 可同时支持同步任务、异步任务；
更友好的支持了 TypeScript ，无需创建自定义复杂包装器来支持 TypeScript，所有内容都是类型化的，并且 API 的设计方式尽可能利用 TS 类型推断；
Pinia 在修改状态的时候不需要通过其他 api，如：vuex 需通过 commit，dispatch 来修改，所以在语法上比 vuex 更容易理解和使用灵活；
由于去除掉了 Module ，无需再创建各个模块嵌套了。Vuex 中，如果数据过多，通常会通过划分模块来进行管理，而 Pinia 中，每个 Store 都是独立的，互不影响；
支持服务端渲染；

2. 安装及引入

yarn add pinia
// 或者使用 npm
npm install pinia

安装完 Pinia 包之后，需要在 main.js 文件中导入 createPinia 函数并将 Pinia 插件与 Vue 应用程序绑定：

import { createApp } from 'vue';
import App from './App.vue';
// 引入 createPinia 函数
import { createPinia } from 'pinia';const app = createApp(App)
// 使用 createPinia() 来创建 Pinia（根存储），并应用到整个应用中
app.use(createPinia());
app.mount('#app');

使用 createPinia() 函数创建并初始化 Pinia 插件实例，将其与 Vue 应用程序绑定使用 app.use(pinia)。至此，我们就可以使用Pinia 来管理 Vue 应用程序的状态了。

最后，在 src 文件下创建一个 store 文件夹，并添加 store.js 文件。

3. Pinia 的使用

Store

Store 是使用 defineStore() 定义的，并且它需要一个唯一名称，作为第一个参数传递。这个名字，也被用作 id 是必须传入的， Pinia 将用它来连接 store 和 devtools。将返回的函数命名为 use… 是跨可组合项的约定，以使其符合使用习惯。

State

State 是 store 中存储数据的地方。通过定义 State，可以在 store 的任何位置访问和修改数据。

// store/store.js
import { defineStore } from 'pinia';export const useMainStore = defineStore('main',{state: () => {return {count:0}}
})

// views/home.vue
<template><div class="count">state:{{mainStore.count}}</div><div class="btnWrap"><button  @click="resetStore">重 置</button></div>
</template><script setup>import {useMainStore} from '@/store/store.js';const mainStore = useMainStore();console.log(mainStore.count) // 0const resetStore = () => {mainStore.$reset()}
</script>

效果：

在这里插入图片描述

Getters

Getter 用来获取从 state 派生的数据，类似于 Vue 组件中的 computed 计算属性。可通过 defineStore() 中的 getters 属性来定义它们。推荐使用箭头函数，并且它将接收 state 作为第一个参数：

export const useStore = defineStore('main', {state: () => ({count: 0,}),getters: {doubleCount: (state) => state.count * 2,},
})

Actions

Action 相当于组件中的方法。它可以通过 defineStore() 中的 actions 属性来定义；Action 是一种将异步操作封装在 store 中的方式，它是一个可被调用的函数，也可接收参数并修改 store 中的状态。

import { defineStore } from 'pinia'export const myStore = defineStore('myStore',{ state: () => ({message: 'Hello',}),actions: {async fetchMessage() {const res = await fetch('http://127.0.0.1:5173/message')this.message = res.message},},
})

4. 示例完整代码

4.1 选项式写法

// store/store.js
import { defineStore } from 'pinia';
import axios from 'axios';export const useMainStore = defineStore('main',{state: () => {return {count:0,count2:0,list:[],}},getters:{doubleCount(){return this.count*2;}},actions:{add(){this.count++;},update(val){this.count = val.value;},add2(){this.count2++;},// 异步async getList(){const res = await axios.get('https://api.oioweb.cn/api/common/history');if(res.data.code == 200){this.list = res.data.result || [];}},}
})

在组件中使用

<template><div class="count">state:{{mainStore.count}}</div><div class="count">getters:{{mainStore.doubleCount}}</div><div class="btnWrap"><button @click="resetStore">重 置</button><button @click="addCount">增 加</button><button @click="updateCount">更新至100</button></div><hr/><div class="count">state:{{count2}}</div><div class="btnWrap"><button @click="add2">增 加</button></div><hr/><h3>历史上的今天</h3><ul class="list"><li v-for="(item,index) in mainStore.list":key="index">{{item.year}}年 - {{item.title}}</li></ul>
</template><script setup>import {useMainStore} from '@/store/store.js';import {onMounted,ref} from 'vue';import {storeToRefs} from 'pinia';const mainStore = useMainStore();const {count2} = storeToRefs(mainStore);const {add2} = mainStore;console.log(mainStore)const number = ref(100);const resetStore = () => {mainStore.$reset();}const addCount = () => {mainStore.add();};const updateCount = () => {mainStore.update(number);}onMounted(() => {mainStore.getList();})
</script>

效果：
分别触发 add2 两次，addCount、getList 一次后的效果
在这里插入图片描述

4.2 组合式写法

在组合式 API 中：

ref() 相当于 state 属性；
computed() 相当于 getters；
function() 相当于 actions；

// store/count.js
import { defineStore } from 'pinia';
import {computed, ref} from 'vue';
import axios from 'axios';// 第一个参数是应用中 Store 的唯一 ID
export const useCountStore = defineStore('count',() => {// stateconst count = ref(0);const count2 = ref(0);const list = ref([]);// getter const doubleCount = computed(() => {return count.value*2})// 同步action const add = () => {count.value++;}const update = (val) =>{count.value = val.value;}const add2 = () => {count2.value++;}// 异步action const getList = async () => {const res = await axios.get('https://api.oioweb.cn/api/common/history');if(res.data.code == 200){list.value = res.data.result || [];}}return{count,count2,doubleCount,list,add,update,add2,getList,}
})

在组件中使用

<template><div class="count">state:{{countStore.count}}</div><div class="count">getters:{{countStore.doubleCount}}</div><div class="btnWrap"><button @click="resetStore">重 置</button><button @click="addCount">增 加</button><button @click="updateCount">更新至100</button></div><hr/><div class="count">state:{{count2}}</div><div class="btnWrap"><button @click="add2">增 加</button></div><hr/><h3>历史上的今天</h3><ul class="list"><li v-for="(item,index) in countStore.list":key="index">{{item.year}}年 - {{item.title}}</li></ul>
</template><script setup>import {useCountStore} from '@/store/count.js';import {onMounted,ref} from 'vue';import {storeToRefs} from 'pinia';const countStore = useCountStore();const {count2} = storeToRefs(countStore);const {add2} = countStore;console.log(countStore)const number = ref(100);const resetStore = () => {countStore.$reset();}const addCount = () => {countStore.add();};const updateCount = () => {countStore.update(number);}onMounted(() => {countStore.getList();})
</script>