Vue 3 & Pinia 状态管理（6） - Pinia Plugins（插件）的相关使用

嗨，我是温新，一名 PHPer。

本篇目标：了解什么是 Pinia

Pinia 官方文档：https://pinia.web3doc.top/introduction.html

pinia 可以使用插件为 store 扩展功能。也就是，可以使用插件功能扩展出额外的功能。

可以扩展的功能列表：

• 向 Store 添加新属性
• 定义 Store 时添加新选项
• 为 Store 添加新方法
• 包装现有方法
• 更改甚至取消操作
• 实现本地存储等副作用
• 仅适用于特定 Store

Pinia 插件扩展功能

使用 pinia.use() 将插件添加到 pinia 实例中。看一个简单的案例：

import { createApp } from 'vue'

// 1、引入 Pinia
import { createPinia } from 'pinia'
// 2、创建 pinia 实例
const pinia = createPinia()

// 4、创建 Pinia 插件
// 定义一个属性
pinia.use(() => {
    return {
        webName:'王美丽的 vlog',
    }
})

// 3、挂载 vue
app.use(pinia)
app.mount('#app')

如此，一个插件就已经完成，可以有仓库中直接使用了。

Pinia 扩展的使用

扩展属性

// main.ts

// 方式 1
pinia.use(() => {
    return {
        webName:'王美丽',
    }
})

// 方式二
pinia.use(({store}) => {
    store.newWebName = '郝帅'
})

扩展方法

// main.ts

// 方式 1
pinia.use(() => {
    return {
        getRandom: () => {
            return Math.random()
        }
    }
})

// 方式 2
pinia.use(({store}) => {
    store.getRandomNumber = () => {
        return Math.ceil(Math.random() * 100)
    }
})

扩展功能的使用

<!-- src/App.vue -->
<p>{{  userStore.getRandomNumber() }} -- {{  userStore.getRandom() }}</p>

<p>{{ userStore.newWebName }} -- {{  userStore.getRandomNumber() }}</p>

功能重写

当使用组合式 API 时，重置功能无法使用，因为 setup 语法糖中没有 $reset。我们的解决方法就是使用插件功能重写 $reset()。

// main.ts

pinia.use(({store}) => {
    // 获取原始值
    const initialState = JSON.parse(JSON.stringify(store.$state))
    store.$reset = () => {
        // 重置原始使用
        store.$state = JSON.parse(JSON.stringify(initialState))
    }
})

插件功能结束，下面是 main.ts 的内容

// main.ts

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import { createPinia } from 'pinia'

const app = createApp(App)

const pinia = createPinia()
pinia.use(({store}) => {
    // 获取原始值
    const initialState = JSON.parse(JSON.stringify(store.$state))
    store.$reset = () => {
        // 重置原始使用
        store.$state = JSON.parse(JSON.stringify(initialState))
    }

    store.newWebName = '郝帅'
    store.getRandomNumber = () => {
        return Math.ceil(Math.random() * 100)
    }
})



// 定义一个公共属性
pinia.use(() => {
    return {
        webName:'王美丽',
        getRandom: () => {
            return Math.random()
        }
    }
})

app.use(pinia)
app.mount('#app')