前端学习笔记 6：Pinia

前端学习笔记 6：Pinia

Pinia 是 Vue 的一个官方库，用于状态管理。

1.安装

首先创建一个 Vue3 项目，具体方式可以参考这里。

安装 Pinia：

npm install pinia

创建一个 pinia 实例 (根 store) 并将其传递给应用：

import './assets/main.css'

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')

2.定义 Store

import { defineStore } from "pinia"
export const useCounterStore = defineStore('counter', {
    state: () => ({ count: 0 }),
    getters: {
        double: (state) => state.count * 2,
    },
    actions: {
        increment() {
            this.count++
        },
    },
})

通过函数defineStore定义 Store，返回值useCounterStore同样是一个函数，且通常以useXXXStore的方式命名。第一个参数是 Store 的名称，第二个参数是对象，其中包含三部分：

• state：Store 的状态（数据）
• getters：计算属性（类似于computed的返回值）
• actions：Store 的方法

通常，会使用更简洁的组合式 API 进行定义：

import { defineStore } from "pinia";
import { computed,ref } from "vue";
export const useCountStore = defineStore('count', () => {
    // 定义 state
    const count = ref(0)
    // 定义 getter
    const doubleCount = computed(() => { return count.value * 2 })
    // 定义 action
    const increment = () => {
        count.value++
    }
    return {count, doubleCount, increment}
})

3.使用 Store

<script setup>
import {useCountStore} from '@/stores/count'
const countStore = useCountStore()
</script>
<template>
    <button @click="countStore.increment">{{ countStore.count }}</button>
    <div>{{ countStore.doubleCount }}</div>
</template>

4.异步 Action

Store 的 Action 中不仅可以定义同步方法，也可以定义异步方法：

import axios from "axios";
import { defineStore } from "pinia";
import { ref } from "vue";

const API_URL = 'http://geek.itheima.net/v1_0/channels'
export const useListStore = defineStore('list', ()=>{
    const list = ref([])
    const getList = async ()=>{
        const result = await axios.get(API_URL)
        list.value = result.data.data.channels
    }
    return {list, getList}
})

使用异步方法的方式与同步方法相同：

<script setup>
import {useListStore} from '@/stores/list'
const listStore = useListStore()
listStore.getList()
</script>
<template>
    <li v-for="channel in listStore.list" :id="channel.id">{{ channel.name }}</li>
</template>

5.解析 Store

像上面展示的那样，通常都需要在使用 Store 时使用.操作符引用其属性或方法，你可能期望使用解析操作符对 Store 对象解析，以更方便地使用：

<script setup>
import {useCountStore} from '@/stores/count'
const countStore = useCountStore()
const {count, doubleCount, increment} = countStore
</script>
<template>
    <button @click="increment">{{ count }}</button>
    <div>{{ doubleCount }}</div>
</template>

实际上这段示例是有 bug 的，因为这里的countStore解析后，获取的属性count和doubleCount都是普通数值，而不是响应式数据（Ref 对象），所以并不会随着点击按钮而发生变化。

要想从 Store 中解析出响应式数据，要使用storeToRefs函数包裹 Store 实例：

<script setup>
import { useCountStore } from '@/stores/count'
import { storeToRefs } from 'pinia'
const countStore = useCountStore()
const { increment } = countStore
const { count, doubleCount } = storeToRefs(countStore)
</script>
<template>
    <button @click="increment">{{ count }}</button>
    <div>{{ doubleCount }}</div>
</template>

需要注意的是，storeToRefs方法返回的对象中是不包含 Store 的 Action 的，所以要以解析的方式获取方法依然要解析原始的 Store 实例。

6.debug

对 Store 相关的数据 debug 可以使用 Vue 的 debug 插件 Vue.js devtools - Microsoft Edge Addons：

7.参考资料

• 黑马程序员前端Vue3小兔鲜电商项目实战