Vue3中pinia状态管理库的使用（Composition API 风格）

一. pinia简介

官方文档

Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态。如果您熟悉 Composition API，您可能会认为您已经可以通过一个简单的 export const state = reactive({}). 这对于单页应用程序来说是正确的，但如果它是服务器端呈现的，会使您的应用程序暴露于安全漏洞。但即使在小型单页应用程序中，您也可以从使用 Pinia 中获得很多好处：

dev-tools 支持
- 跟踪动作、突变的时间线
- Store 出现在使用它们的组件中
- time travel 和更容易的调试
热模块更换
- 在不重新加载页面的情况下修改您的 Store
- 在开发时保持任何现有状态
插件：使用插件扩展 Pinia 功能
为 JS 用户提供适当的 TypeScript 支持或 autocompletion
服务器端渲染支持

与 Vuex 3.x/4.x 的比较

mutations 不再存在。他们经常被认为是 非常冗长。他们最初带来了 devtools 集成，但这不再是问题。
无需创建自定义复杂包装器来支持 TypeScript，所有内容都是类型化的，并且 API 的设计方式尽可能利用 TS 类型推断。
不再需要注入、导入函数、调用函数、享受自动完成功能！
无需动态添加 Store，默认情况下它们都是动态的，您甚至都不会注意到。请注意，您仍然可以随时手动使用 Store 进行注册，但因为它是自动的，您无需担心。
不再有 modules 的嵌套结构。您仍然可以通过在另一个 Store 中导入和使用来隐式嵌套 Store，但 Pinia 通过设计提供平面结构，同时仍然支持 Store 之间的交叉组合方式。 您甚至可以拥有 Store 的循环依赖关系。
没有命名空间模块。鉴于 Store 的扁平架构，"命名空间" Store 是其定义方式所固有的，您可以说所有 Store 都是命名空间的。

二. pinia基本使用

2.1 安装pinia

javascript 复制代码

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

2.2 vue实例中导入pinia

在main.js中导入createPinia，执行方法得到pinia实例，再将实例添加到app中

javascript 复制代码

import { createPinia } from 'pinia'

const pinia = createPinia()

createApp(App).use(pinia)

2.3 基础实例

创建一个 Store （/stores/counter.js）：

javascript 复制代码

// 导入defineStore方法
import { defineStore } from 'pinia'
import { ref } from 'vue'

export const useCounterStore = defineStore('counter', () => {
    // 定义state
    const count = ref(1)

    // 定义修改数据的函数
    const increment = () => {
        count.value++
    }

    // return返回数据
    return { count, increment }
})

在组件中使用Store

javascript 复制代码

<script setup>
import { useCounterStore } from './store/counter';
const counterStore = useCounterStore();

</script>

<template>
 <button @click="counterStore.increment">{{ counterStore.count }}</button>  
</template>

<style scoped></style>

三. getters

Getter 完全等同于 Store 状态的计算值。他们接收"状态"作为第一个参数以鼓励箭头函数的使用：

使用computed来定义getter

javascript 复制代码

const doubleCount = computed(() => count.value * 2)

return { doubleCount }

四. action

Actions 相当于组件中的 methods。

javascript 复制代码

const list = ref([])
const getList = async () => {
        const res = await axios.get('http://geek.itheima.net/v1_0/channels')
        list.value = res.data.data.channels
    }
return { list, getList }

组件中使用

javascript 复制代码

 <ul>
  <li v-for="item in counterStore.list" :key="item.id">
    {{ item.name }}
  </li>
 </ul>

五. storeToRefs响应式解构

storeToRefs 是 Pinia 提供的一个工具函数，用于在保持响应式的前提下解构 Store 中的状态和 getters。

javascript 复制代码

const { count, doubleCount } = storeToRefs(counterStore);

<template>
 <button @click="counterStore.increment">{{ count }}</button>  
 {{ doubleCount }}
</template>

可以看到count还是可以回显出来

注意！！！ Actions方法不需要响应式，也就是说不需要用storeToRefs解构，直接解就行了