9.搭建Vite3+Pinia2组合模式

书诚小驿2024/10/09前端知识库Vue3

一、什么是Vite3+Pinia2组合模式

vite 是一个现代的前端构建工具和开发服务器,而 pinia 是 Vue.js 的状态管理库,类似于 Vuex 但更轻量且易于使用。

Vite 官方中文文档open in new window

  • Vite 最新的脚手架

Vite 是一个面向现代浏览器和 Node.js 的构建工具,它使用原生 ES 模块导入来提供闪电般的冷启动。Vite 主要服务于 Vue.js 项目,但也支持 React 和其他框架。

  • Pinia 最新的状态管理

Pinia 是 Vue.js 的状态管理库,它是 Vuex 的下一代。Pinia 提供了更简洁、更直观的 API,并且与 Vue 3 的 Composition API 结合得很好。Pinia 的设计初衷是尽可能简单直观,同时仍然提供 Vuex 带来的所有功能。

二、搭建第一个 Vite 项目

1. 打开命令行工具,创建vite-pinia-study项目

npm create vite@latest vite-pinia-study
  • 是否要安装create-vite@5.2.3
Need to install the following packages:
  create-vite@5.2.3
Ok to proceed? (y) y
  • 选择 vue,空格进行选中,回车确认
? Select a framework: » - Use arrow-keys. Return to submit.
    Vanilla
>   Vue
    React
    Preact
    Lit
    Svelte
    Solid
    Qwik
    Others
  • 选择一个变体,这里选择自定义
? Select a variant: » - Use arrow-keys. Return to submit.
    TypeScript
    JavaScript
>   Customize with create-vue ↗
    Nuxt ↗
  • 需要安装 create-vue 这个 npm 包
Need to install the following packages:
  create-vue@3.10.3
Ok to proceed? (y) y
  • 根据项目需要进行选择
Vue.js - The Progressive JavaScript Framework

√ 是否使用 TypeScript 语法? ... 否 / 是  (否)
√ 是否启用 JSX 支持? ... 否 / 是  (否)
√ 是否引入 Vue Router 进行单页面应用开发? ... 否 / 是 (是)
√ 是否引入 Pinia 用于状态管理? ... 否 / 是  (是)
√ 是否引入 Vitest 用于单元测试? ... 否 / 是   (否)
√ 是否要引入一款端到端(End to End)测试工具? » 不需要  (不需要)
√ 是否引入 ESLint 用于代码质量检测? ... 否 / 是  是(是)
? 是否引入 Prettier 用于代码格式化? » 否 / 是  否(否)
? 是否引入 Vue DevTools 7 扩展用于调试? (试验阶段) » 否 / 是  ()
  • 项目创建成功标志
项目初始化完成,可执行以下命令:
  cd vite-pinia-study
  npm install
  npm run dev

三、简单了解 vite-pinia

1. 修改端口,vite.config.js

在 vite.config.js 中,将端口号定义为数字 8080 而不是字符串 "8080"。这样可以确保 Vite 服务器使用正确的端口配置。

import { fileURLToPath, URL } from "node:url";

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
  server: {
    port: "8080",
  },

2. App.vue 引用 stores 下的 counter.js

使用 Pinia 来管理状态,可以避免手动处理异步操作的同步问题。Pinia 的 actions 和 getters 是同步的,允许你直接在组件中进行状态更新和使用,这使得状态管理更加简洁和直观。

import { storeToRefs } from "pinia";
import { useCounterStore } from "./stores/counter";
const counterStore = useCounterStore();
const { count, doubleCount } = storeToRefs(counterStore);
<template>
  {{ count }}{{ doubleCount }}
</template>
  • store 中是同步进行的
const handleClick = () => {
  counterStore.increment();
};
<button @click="handleClick">点击</button>
最后更新时间' 2025/1/3 14:16:58