Vue3 进阶，新特性 defineOptions/defineModel+Pinia 状态管理全解析
Vue3.3 + 新增了defineOptions、defineModel等实用语法糖，而Pinia则是 Vue3 官方推荐的状态管理工具（替代 Vuex）。
一、Vue3.3 新特性：语法糖简化开发
Vue3.3 推出了多个语法糖，核心是减少模板代码、提升开发效率。
1.defineOptions：简化组件选项
在 Vue3 中，组件的name、inheritAttrs等选项需要单独写在export default中，defineOptions可以直接在<script setup>中定义这些选项。
用法示例：
<script setup> // 直接在setup中定义组件选项 defineOptions({ name: 'MyComponent', // 组件名（用于keep-alive等场景） inheritAttrs: false // 禁止属性继承到根元素 }) </script>替代的旧写法：
<script setup> // 旧写法：需要额外写export default </script> <script> export default { name: 'MyComponent', inheritAttrs: false } </script>2.defineModel：简化双向绑定（v-model）
在 Vue3 中，子组件实现v-model需要同时处理props和emit，defineModel可以一行代码实现双向绑定。
用法示例：
子组件（Input.vue）：
<script setup> // 用defineModel定义双向绑定的属性 const modelValue = defineModel() </script> <template> <!-- 直接绑定到输入框 --> <input v-model="modelValue" /> </template>父组件：
<script setup> import Input from './Input.vue' import { ref } from 'vue' const msg = ref('') </script> <template> <!-- 直接使用v-model --> <Input v-model="msg" /> <p>输入内容：{{ msg }}</p> </template>替代的旧写法：
<!-- 子组件旧写法 --> <script setup> const props = defineProps(['modelValue']) const emit = defineEmits(['update:modelValue']) </script> <template> <input :value="props.modelValue" @input="emit('update:modelValue', $event.target.value)" /> </template>二、Pinia：Vue3 官方状态管理工具
Pinia 是 Vue3 官方推荐的状态管理库，相比 Vuex 更轻量、更简洁，原生支持 TypeScript，是 Vue3 项目的首选。
1. 什么是 Pinia？
Pinia 可以理解为Vuex 的升级版，核心特点：
- 无
Mutations：直接在Action中修改状态； - 更简洁的 API：仅需
defineStore定义仓库； - 原生支持 TS：类型提示更友好；
- 轻量：打包体积仅 1KB 左右。
2. 手动添加 Pinia 到 Vue 项目
步骤 1：安装 Pinia
npminstallpinia步骤 2：在入口文件注册 Pinia
// main.jsimport{createApp}from'vue'import{createPinia}from'pinia'// 引入PiniaimportAppfrom'./App.vue'constapp=createApp(App)app.use(createPinia())// 注册Piniaapp.mount('#app')3. Pinia 的基本语法：defineStore
通过defineStore定义一个 “仓库（Store）”，每个仓库管理一块全局状态。
示例：定义用户仓库（userStore）
// src/stores/user.jsimport{defineStore}from'pinia'import{ref}from'vue'// 第一个参数：仓库唯一标识；第二个参数：仓库配置exportconstuseUserStore=defineStore('user',()=>{// 1. 状态（对应Vuex的state）constuserInfo=ref(null)consttoken=ref('')// 2. 计算属性（对应Vuex的getters）constisLogin=()=>{return!!token.value}// 3. 方法（对应Vuex的actions，支持异步）constlogin=async(form)=>{// 模拟接口请求constres=awaitnewPromise(resolve=>{setTimeout(()=>{resolve({userInfo:{name:'张三',age:20},token:'pinia_token_123'})},1000)})// 直接修改状态（无需Mutations）userInfo.value=res.userInfo token.value=res.token}constlogout=()=>{userInfo.value=nulltoken.value=''}// 返回需要暴露的状态、计算属性、方法return{userInfo,token,isLogin,login,logout}})4. 在组件中使用 Pinia
在组件中通过useUserStore获取仓库实例，直接使用状态和方法。
<script setup> import { useUserStore } from '@/stores/user' // 获取仓库实例 const userStore = useUserStore() // 调用仓库方法 const handleLogin = async () => { await userStore.login({ username: 'zhangsan', password: '123' }) } </script> <template> <div v-if="userStore.isLogin()"> <p>用户名：{{ userStore.userInfo?.name }}</p> <button @click="userStore.logout">退出登录</button> </div> <button v-else @click="handleLogin">登录</button> </template>5.Action异步写法
Pinia 的Action支持异步操作（直接写async/await），无需像 Vuex 那样区分同步 / 异步。
// src/stores/article.jsexportconstuseArticleStore=defineStore('article',()=>{constarticleList=ref([])// 异步Action：请求文章列表constfetchArticleList=async()=>{constres=awaitfetch('https://api.example.com/article/list')constdata=awaitres.json()articleList.value=data.list}return{articleList,fetchArticleList}})6.storeToRefs：解构响应式状态
直接解构 Pinia 仓库的状态会丢失响应式，storeToRefs可以保留响应式。
<script setup> import { useUserStore } from '@/stores/user' import { storeToRefs } from 'pinia' // 引入storeToRefs const userStore = useUserStore() // 解构响应式状态 const { userInfo, token } = storeToRefs(userStore) // 方法直接解构（无需storeToRefs） const { login, logout } = userStore </script>7. Pinia 持久化：状态本地存储
Pinia 默认不会持久化状态（刷新后丢失），可以用pinia-plugin-persistedstate插件实现本地存储。
步骤 1：安装插件
npminstallpinia-plugin-persistedstate步骤 2：注册插件
// main.jsimport{createApp}from'vue'import{createPinia}from'pinia'importpiniaPluginPersistedstatefrom'pinia-plugin-persistedstate'// 引入插件importAppfrom'./App.vue'constpinia=createPinia()pinia.use(piniaPluginPersistedstate)// 注册插件createApp(App).use(pinia).mount('#app')步骤 3：开启仓库持久化
// src/stores/user.jsexportconstuseUserStore=defineStore('user',()=>{// ...状态和方法},{persist:true// 开启持久化})三、注意
想要了解更多有关Pinia的请点击这个链接到官网学习
想要学习持久化插件的更多内容的请点击这个链接