Pinia 15分钟上手

爱吃菠萝包的猫
112 阅读2分钟

Pinia 核心

Pinia 介绍

Snipaste_2024-01-30_23-14-47.png Pinia 最初是在 2019 年 11 月左右重新设计使用 Composition API 。从那时起，最初的原则仍然相同，但 Pinia 对 Vue 2 和 Vue 3 都有效，并且不需要您使用组合 API。 除了安装和 SSR 之外，两者的 API 都是相同的，并且这些文档针对 Vue 3，并在必要时提供有关 Vue 2 的注释，以便 Vue 2 和 Vue 3 用户可以阅读！

为什么要使用 Pinia？

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

  • dev-tools 支持

    • 跟踪动作、突变的时间线
    • Store 出现在使用它们的组件中
    • time travel 和 更容易的调试

  • 热模块更换

    • 在不重新加载页面的情况下修改您的 Store
    • 在开发时保持任何现有状态

  • 插件：使用插件扩展 Pinia 功能

  • 为 JS 用户提供适当的 TypeScript 支持或 autocompletion

  • 服务器端渲染支持

  • Pinia的数据流转图

Snipaste_2024-01-30_23-16-30.png

Pinia 15分钟上手

掌握：实用Pinia使用，管理计数器的状态

使用步骤：

  • 安装
yarn add pinia
# or
npm i pinia
  • 导入，实例化，当做插件使用，和其他插件使用套路相同
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const pinia = createPinia()
const app = createApp(App)

app.use(pinia)
app.mount('#app')
  • 创建仓库&使用仓库

```js
import { defineStore } from "pinia"
import { computed, ref } from "vue"

export const useCounterStore = defineStore("counter", () => {
  return {}
})

<script setup lang="ts">
import { useCounterStore } from "./store/counter"
// store中有状态和函数
const store = useCounterStore()
</script>
  • 进行状态管理
  // state
  const count = ref(100)
  // getters
  const doubleCount = computed(() => count.value * 2)
  // mutations
  const update = () => count.value++
  // actions
  const asyncUpdate = () => {
    setTimeout(() => {
      count.value++
    }, 1000)
  }
  return { count, doubleCount, update, asyncUpdate }

<template>
  APP {{ store.count }} {{ store.doubleCount }}
  <button @click="store.update()">count++</button>
  <button @click="store.asyncUpdate()">async update</button>
</template>

总结：

  • 通过 const useXxxStore = defineStore('id',函数) 创建仓库得到使用仓库的函数

Snipaste_2024-01-30_23-19-37.png

  • 使用Pinia与在组件中维护数据大体相同，这就是 Pinia 的状态管理基本使用

storeToRefs的使用

掌握：使用 storeToRefs 解决解构仓库状态丢失响应式的问题

问题：

  • 当我们想解构 store 提供的数据时候，发现数据是没有响应式的。

回忆：

  • 在学习 vue 组合式API创建的响应式数据的时候，使用 toRefs 保持结构后数据的响应式

方案：

  • 使用 storeToRefs 解决解构仓库状态丢失响应式的问题

代码：

import { storeToRefs } from 'pinia'

const store = useCounterStore()
const { count, doubleCount } = storeToRefs(store)

小结：

  • 当你想从 store 中解构对应的状态使用，需要使用 storeToRefs
avatar
文章
阅读
粉丝