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

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

2.2 vue实例中导入pinia

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

import { createPinia
} from 'pinia'
const pinia = createPinia()
createApp(App).use(pinia)

2.3 基础实例

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

// 导入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

<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

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

四. action

Actions 相当于组件中的 methods。

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
}

组件中使用

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

五. storeToRefs响应式解构

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

const { count, doubleCount
} = storeToRefs(counterStore);
<template>
  <button @click="counterStore.increment">
    {
    { count
    }
    }<
    /button>
    {
    { doubleCount
    }
    }
    <
    /template>

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

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