Pinia

Pinia 是一个状态管理库，什么是状态管理库？我们又为什么需要 Pinia 呢？

当我们需要在 Vue 的组件（页面）中共享状态（变量）时，总是特别的麻烦。如果是父子间的组件还可能通过 v-model 的方式共享，但多个没有父子关系的组件（页面）使用 v-model 共享状态就是不可能的。

又总是有很多状态不得不在各种组件（页面）间使用。比如以下的 twitter 页面，用户登录后的头像就同时出现在了页面的三个地方。它们应该由同一个状态管理，相互保持一致。

而状态管理库，就解决了这个问题，让我们可以在任意组件（页面）管理同一个状态。

$$tip

也许很多人听说过 Vuex 这个状态管理库， Pinia 最初是作为 Vuex5的实验版本推出的（目前 Vuex 的最新版为 4）， Pinia 的开发团队中有很多人也来自 Vuex 团队。

而随后大家发现 Pinia 已经足够好用且成熟，随之连 Vuex 文档中都推荐使用 Pinia。

$$

$$tip

更多信息，查看 Pinia 官方文档，https://pinia.vuejs.org/introduction.html

$$

上手 Pinia

下面我们以一个计数器的案例来实验 pinia，使用 options API 的写法。

安装 pinia

使用 npm install pinia 命令安装 pinia。

创建 pinia

在 src 文件夹中创建名为 pinia 的文件夹，并在其他创建 index.js 文件，输入以下代码。

import { createPinia } from "pinia"

const pinia = createPinia()

export default pinia

挂载 pinia 到 vue 上

打开 main.js 文件，增加引入并挂载 pinia 的代码。

import { createApp } from "vue"
import App from "./App.vue"

import pinia from "./pinia"

const app = createApp(App)

// 挂载 pinia
app.use(pinia)

app.mount("#app")

创建组件

创建 Counter 与 Viewer 两个组件，代码分别如下。

components/Counter.vue

<template>
    <button @click="hit">点击计数</button>
</template>
<script>
import { useCounterStore } from "../stores/counter"

export default {
    data() {
        const conterStore = useCounterStore() // 引用 conterStore 对象
        return {
            conterStore,
        }
    },
    methods: {
        hit() {
            this.conterStore.increase()
        },
    },
}
</script>

components/Viewer.vue

<template>
    <button @click="hit">点击计数</button>
</template>
<script>
import { useCounterStore } from "../stores/counter"

export default {
    data() {
        const conterStore = useCounterStore() // 引用 conterStore 对象
        return {
            conterStore,
        }
    },
    methods: {
        hit() {
            this.conterStore.increase()
        },
    },
}
</script>

修改 App.vue 文件如下。

<template>
    <Viewer />
    <Counter />
</template>

<script>
import Counter from "./components/Counter.vue"
import Viewer from "./components/Viewer.vue"

export default {
    components: {
        Counter,
        Viewer,
    },
}
</script>

$$tip

完整代码放在了 github 上，https://github.com/lalawila/pinia-counter

$$