极简Vue3教程--Pinia状态管理

Pinia（发音为/piːnjʌ/，如英语中的“peenya”）是最接近piña（西班牙语中的菠萝）的词；Pinia开始于大概2019年，最初是作为一个实验为Vue重新设计状态管理，让它用起来像组合式API（Composition API）。从那时到现在，最初的设计原则依然是相同的，并且目前同时兼容Vue2、Vue3，也并不要求你使用Composition API；Pinia本质上依然是一个状态管理的库，用于跨组件、页面进行状态共享（这点和Vuex、Redux一样）；

和Vuex相比，Pinia有很多的优势：比如mutations 不再存在：更友好的TypeScript支持，Vuex之前对TS的支持很不友好；不再有modules的嵌套结构：也不再有命名空间的概念，不需要记住它们的复杂关系；

使用Pinia

1. 安装依赖

npm install pinia

2. 创建一个pinia并且将其传递给应用程序：

我们新建一个文件夹叫stores,后续pinia相关文件都放入这个文件夹中，创建index.js

import { createPinia } from 'pinia'const pinia = createPinia()export default pinia

在main.js中引入使用

import { createApp } from 'vue'
import App from './App.vue'
import pinia from './stores'createApp(App).use(pinia).mount('#app')

这样pinia就引入了我们的app中，可以开始使用了

认识Store

一个 Store （如 Pinia）是一个实体，它会持有为绑定到你组件树的状态和业务逻辑，也就是保存了全局的状态；它有点像始终存在，并且每个人都可以读取和写入的组件；你可以在你的应用程序中定义任意数量的Store来管理你的状态；

Store有三个核心概念：state、getters、actions；

state用来存储数据，可以直接访问修改,getters类似computed,actions类似于methods,可以直接调用

定义一个Store

在stores文件夹下新建counter.js

import {defineStore} from 'pinia'export const useCounterStore = defineStore('counter', {state: () => {return {count: 0,banners: [],recommends: []}},getters: {doubleCount(state) {return state.count * 2}},actions: {async fetchHomeMultidata() {const res = await fetch("http://123.207.32.32:8000/home/multidata")const data = await res.json()this.banners = data.data.banner.listthis.recommends = data.data.recommend.listreturn 'ok'}}
})

使用store,useCounterStore是个函数，调用后可以返回一个store对象，里面可以直接使用state,getters和actions，其中state可以直接访问和修改，getters可以作为属性来使用,actions是作为方法来调用的，返回promise

<template><div class="home"><h2>count: {{ counterStore.count }}</h2><h2>count: {{ counterStore.doubleCount }}</h2><button @click="changeState">修改state</button><h2>轮播的数据</h2><ul><template v-for="item in counterStore.banners"><li>{{ item.title }}</li></template></ul></div>
</template><script setup>
import {useCounterStore} from '@/stores/counterStore';// useCounterStore是一个函数
const counterStore = useCounterStore()// actions返回的是promise
counterStore.fetchHomeMultidata().then(res => {console.log(res)
})function changeState() {// state可以直接访问和修改counterStore.count++
}</script>