前言

Pinia 是 Vue3 标配状态管理。简单、轻量、易用。

一、创建 Store

// store/modules/user.js
import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({
    token: '',
    userInfo: null
  }),

  actions: {
    setToken(token) {
      this.token = token
    },
    setUserInfo(info) {
      this.userInfo = info
    }
  }
})

二、在组件中使用

<script setup>
import { useUserStore } from '@/store/modules/user'
const userStore = useUserStore()

// 获取数据
console.log(userStore.token)

// 修改数据
userStore.setToken('xxxx')
</script>

三、Getters 计算

getters: {
  isLogin: (state) => !!state.token
}

四、数据持久化（常用）

安装插件：

npm install pinia-plugin-persistedstate

在 store 中启用：

export const useUserStore = defineStore('user', {
  // ...
  persist: true
})

数据自动存在 localStorage。

五、模块化最佳实践

• store/modules/xxx.js 按业务拆分
• 命名：useXxxStore
• 页面直接引入使用

前言

Vue3 的 <script setup> 是官方推荐写法，代码更简洁、逻辑更聚合。本文带你真正用好组合式 API。

一、script setup 基本写法

<script setup>
// 直接写逻辑，无需 export default
import { ref, reactive, computed } from 'vue'

const msg = ref('Hello Vue3')
</script>

<template>
  <div>{{ msg }}</div>
</template>

二、响应式数据

• ref：基础类型（string/number/boolean）

• reactive：对象 / 数组

  const num = ref(0) const user = reactive({ name: '张三', age: 20 })

三、计算属性 computed

import { computed } from 'vue'

const doubleNum = computed(() => num.value * 2)

四、方法与事件

<button @click="add">+1</button>

<script setup>
const add = () => {
  num.value++
}
</script>

五、生命周期

import { onMounted, onUpdated, onUnmounted } from 'vue'

onMounted(() => {
  console.log('组件挂载')
})

六、父传子 props

// 子组件
<script setup>
import { defineProps } from 'vue'
const props = defineProps({
  title: String
})
</script>

七、子传父 emit

// 子组件
const emit = defineEmits(['change'])
const handleChange = () => {
  emit('change', '新数据')
}

八、获取 DOM：ref

<div ref="box"></div>

<script setup>
import { ref } from 'vue'
const box = ref(null)

onMounted(() => {
  console.log(box.value)
})
</script>

总结

<script setup> 优点：

• 代码更少
• 无需 return
• 更好的 TS 支持
• 逻辑更清晰

前言

Vue3 搭配 Vite 构建工具，开发速度飞起。这篇文章带你从 0 到 1 搭建一个标准 Vue3 工程化项目。

一、环境准备

确保你已安装：

• Node.js 16+
• npm / yarn / pnpm

二、使用 Vite 创建项目

npm create vite@latest

步骤：

1. 输入项目名
2. 选择 Vue
3. 选择 JavaScript 或 TypeScript

进入项目：

cd 项目名
npm install
npm run dev

打开浏览器即可看到 Vue3 欢迎页面。

三、项目结构说明

• main.js：入口文件
• App.vue：根组件
• components/：公共组件
• views/：页面组件
• router/：路由
• store/：状态管理
• assets/：静态资源

四、配置 Vue Router

安装：

npm install vue-router@4

新建 router/index.js：

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

在 main.js 挂载：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

五、配置 Pinia 状态管理

安装：

npm install pinia

新建 store/index.js：

import { createPinia } from 'pinia'
const pinia = createPinia()
export default pinia

在 main.js 挂载：

import store from './store'
createApp(App).use(router).use(store).mount('#app')

总结

本文完成了：

• Vite + Vue3 项目创建
• Vue Router 4 路由配置
• Pinia 状态管理配置

下一篇我们讲 Vue3 组合式 API 最佳实践。