Vue3学习笔记-上手篇(五)

十一.组合式API，v3.3新特性 defineModel()双向绑定

1.在vue2中，对v-model已熟透，但向子组件绑定v-model，很少用到。大多数使用props和事件回调来实现数据的传递。看一段代码：

//父组件
<script setup>
import MyInput from "./MyInput.vue";
import { ref } from "vue";
const data = ref("");
</script>
<template>
  <div>数据在父组件中{{ data }}</div>
  <MyInput v-model="data" />
</template>

//子组件
<script setup>
const props = defineProps({ modelValue: String });
const emits = defineEmits(["update:modelValue"]);
</script>
<template>
  <div>
    <span>这是子组件的input</span>
    <input
      type="text"
      :value="modelValue"
      @input="(e) => emits('update:modelValue', e.target.value)"
    />
  </div>
</template>

效果，子组件的输入，同时修改父组件的数据，实现向子组件双向绑定更新。 那么现在的vue3中就没那么多步骤了，看如下代码：

//只修改子组件

<script setup>
import { defineModel } from "vue";//高版本无需导入
const modelValue = defineModel();
</script>
<template>
  <div>
    <span>这是子组件的input</span>
    <input
      type="text"
      :value="modelValue"
      @input="(e) => (modelValue = e.target.value)"
    />
  </div>
</template>

因defineModel是新的特性，vue版本需要3.3以上，第一使用还需要在配置文件中开启。开启如下代码：

//片段代码
 plugins: [
    vue({
      script: { defineModel: true },
    }),
  ],

相当好用，特别是封装时好用。

十二.vue3中 pinia状态管理库

1. pinia是vue3中的状态管理库，替代了vue2中的vuex状态管理工具。
2. 优势：a.提供了更加简便的API(去掉了mutation) b.提供了符合组合式API的风格 C.去掉了modules的概念，每一个store都是一个独立的模块。

3.pinia的安装与引入

1.pinia组件安装：npm install pinia

//在main.js中全局引入
import { createPinia } from "pinia";

const pinia = createPinia();
const app = createApp(App);
app.use(pinia);

4. 创建stores目录：在项目str目录下创建stores目录，状态管理所用文件都放在此目录下。
5. 至此pinia安装完成。