Vue 3 Pinia 状态管理快速入门指南

2024-12-11 14:23:12

在 Vue.js 应用开发中，状态管理至关重要。Pinia 作为新一代 Vue 状态管理库，以其简洁的 API、强大的功能和 TypeScript 支持，赢得了众多开发者的喜爱。本文将通过一个简单的案例，带你快速上手 Pinia。

1. 引入 Pinia 并定义 Store

Pinia 的核心概念是 Store，它可以理解为应用中状态的集中存储和管理中心。我们通过 defineStore 函数来定义一个 Store。

1.1 安装 Pinia

首先，确保你已经在项目中安装了 Pinia：

npm install pinia

1.2 创建 Store

接下来，在 store/system.js 文件中定义一个名为 useSystemStore 的 Store，用于管理底部导航栏的状态：

import { defineStore } from 'pinia';
import { ref } from 'vue';

export const useSystemStore = defineStore('system', () => {
    // 定义响应式状态
    const active = ref(0);  // 当前选中的 tab 索引
    const showTabbar = ref(false);  // tabbar 是否显示

    // 定义修改状态的方法 (Actions)
    const activeTab = (index) => {
        active.value = index;
    };

    const showTab = (show) => {
        showTabbar.value = show;
    };

    // 返回需要暴露的状态和方法
    return {
        active,
        activeTab,
        showTabbar,
        showTab
    };
});

defineStore：定义一个 Store，第一个参数是 Store 的唯一标识符，第二个参数是一个函数，返回一个包含状态和方法的对象。
ref：定义响应式状态。
active：当前选中的 tab 索引。
showTabbar：tabbar 是否显示。
activeTab：切换选中 tab 的方法。
showTab：控制 tabbar 显示隐藏的方法。

1.3 在 Vue 应用中注册 Pinia

在 main.js 文件中注册 Pinia：

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

const app = createApp(App);
app.use(createPinia());
app.mount('#app');

2. 在组件中使用 Store

2.1 在根组件 app.vue 中使用 Store

在 app.vue 组件中，我们可以使用 useSystemStore 函数获取 Store 实例，并通过 computed 包装状态数据，实现数据的响应式更新。

<template>
  <router-view></router-view>

  <nut-tabbar v-model="active" @tab-switch="tabSwitch" v-show="showTabbar" class="fixed-tabbar">
    <nut-tabbar-item tab-title="首页"><Home /></nut-tabbar-item>
    <nut-tabbar-item tab-title="消息"><Message /></nut-tabbar-item>
    <nut-tabbar-item tab-title="积分商城"><Cart /></nut-tabbar-item>
    <nut-tabbar-item tab-title="我的"><My /></nut-tabbar-item>
  </nut-tabbar>
</template>

<script setup>
import { computed } from 'vue';
import { useSystemStore } from './store/system';

const systemStore = useSystemStore();

// 使用 computed 获取响应式状态
const active = computed(() => systemStore.active);
const showTabbar = computed(() => systemStore.showTabbar);

// tab 切换事件处理
const tabSwitch = (item, index) => {
  console.log(index);
};

// 同时显示 tabbar 并选中指定 tab 的方法
const showTabbarAndSelect = (index) => {
  systemStore.showTab(true);
  systemStore.activeTab(index);
};
</script>

useSystemStore()：获取 Store 实例。
computed()：创建计算属性，使状态具有响应性。
v-show：根据 showTabbar 状态控制底部导航栏的显示隐藏。
v-model 和 @tab-switch：用于绑定当前选中 tab 并处理 tab 切换事件。

3. 在其他组件中使用 Store

3.1 在 index.vue 组件中通过 inject 使用 Store

在其他组件中，可以通过 inject 函数来获取根组件中提供的 showTabbarAndSelect 方法，实现跨组件的状态控制。

<script setup>
import { inject } from 'vue';
import { useSystemStore } from '../store/system';

//直接使用 Store
const systemStore = useSystemStore();
systemStore.showTab(true);
systemStore.activeTab(2);

// 通过 inject 获取根组件提供的方法
const showTabbarAndSelect = inject('showTabbarAndSelect');
showTabbarAndSelect && showTabbarAndSelect(); // 注意需要判断是否存在
</script>