Pinia#

关于 Pinia 和 Vuex#

Pinia 最初是为了探索 Vuex 的下一次迭代会是什么样子，结合了 Vuex 5 核心团队讨论中的许多想法。最终，我们意识到 Pinia 已经实现了我们在 Vuex 5 中想要的大部分内容，并决定实现它取而代之的是新的建议。

与 Vuex 相比，Pinia 提供了一个更简单的 API，具有更少的规范，提供了 Composition-API 风格的 API，最重要的是，在与 TypeScript 一起使用时具有可靠的类型推断支持。

1
title: Pinia 中文文档
2
desc: 点击跳转官网查看详细内容
3
logo: /assets/images/study/frontend/framework/pinia/pinia.svg
4
link: https://pinia.web3doc.top
5
color: rgba(173, 216, 590, 0.15)

快速开始#

引入 Pinia#

1
yarn add pinia
2
# 或者使用 npm
3
npm install pinia

1
import { createPinia } from 'pinia'
2

3
app.use(createPinia())

定义 Store#

1
import { ref, computed } from 'vue'
2
import { defineStore } from 'pinia'
3

4
export const useStore = defineStore('main', () => {
5
    const name = ref<string>('songbaicheng')
6
    const age = ref<number>(23)
7

8
    return { name, age }
9
})

使用 Store#

1
<script setup lang="ts">
2
import { useStore } from './stores/main';
3

4
const stores = useStore()
5
</script>
6

7
<template>
8
{{ stores.name }}-{{ stores.age }}
9
</template>