1. Vue

  2. Node.js

  3. 构建工具

  4. 路由

  5. 接口请求

  6. 状态管理

Pinia

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

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

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

image

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

$$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

image

挂载 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

$$