# vue3-pinia-quick-start

**Repository Path**: malguy/vue3-pinia-quick-start

## Basic Information

- **Project Name**: vue3-pinia-quick-start
- **Description**: vue quick start
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2023-10-16
- **Last Updated**: 2024-08-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue quick start

## init vue project

```shell 
npm init vue@latest
```

## tailwind support

```shell
npm i -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
```

```js
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./interceptor.js.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};
```

```js
// .eslintrc.cjs
/* eslint-env node */
require("@rushstack/eslint-patch/modern-module-resolution");

module.exports = {
  // ...
  env: {
    node: true,
  },
};
```

```css
/* base.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
```

```js
// main.js
import "./assets/base.css";
// ... 
```

# pinia

```js
import { defineStore } from "pinia";

// 定义状态
export default defineStore("modal", {
  state: () => ({
    isOpen: true,
  }),
  getters: {
    // 类似计算属性
    // 根据isOpen返回string
    hiddenClass(state) {
      return !state.isOpen ? "hidden" : "";
    },
  },
});
```

```vue

<script>
  import { RouterLink, RouterView } from 'vue-router'
  import { mapStores, mapState, mapWritableState } from 'pinia'
  import useModelStore from '@/stores/modal'

  export default {
    name: 'AppHeader',
    computed: {
      // 使用状态
      ...mapStores(useModelStore),
      // mapWritableState,mapState([]) 都有时 hiddenClass 才生效
      ...mapWritableState(useModelStore, ['isOpen']),
      ...mapState(useModelStore, ['hiddenClass'])
    },
    // mapState 是只读的,不能更改状态数据;mapWritableState 只允许修改数据
    methods: {
      toggleAuthModal() {
        this.isOpen = !this.isOpen
        console.log(this.isOpen)
        console.log(this.hiddenClass)
      }
    }
  }
</script>

<template>
  <header>
    <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />

    <div class="wrapper">
      <div>
        <p :class="hiddenClass">open</p>
        <button @click="toggleAuthModal"
                class="rounded-xl p-2 bg-amber-400">change open
        </button>
      </div>
      <hr class="m-4">
      <nav>
        <RouterLink to="/">Home</RouterLink>
        <RouterLink to="/about">About</RouterLink>
      </nav>
    </div>
  </header>
  <!-- 显示路由内容 outlet -->
  <RouterView />
</template>
```

```vue

<template>
  <div class="about">
    <h1 :class="hiddenClass">This is an about page</h1>
  </div>
</template>
<script>
  import { mapState, mapWritableState } from 'pinia'
  import useModalStore from '@/stores/modal'

  export default {
    name: 'Auth',
    computed: {
      ...mapState(useModalStore, ['hiddenClass']),
      ...mapWritableState(useModalStore, {
        // 起别名
        modalVisibility: 'isOpen'
      })
    }
  }
</script>
```

# form validate

```shell
npm i vee-validate
```

```js
// main.js
// ...
import VeeValidatePlugin from "./includes/validation";
// ...
app.use(VeeValidatePlugin);

app.mount("#app");
```

```js
// src/includes/validation.js
import {
  configure,
  Form as VeeForm,
  Field as VeeField,
  defineRule,
  ErrorMessage,
} from "vee-validate";
import {
  required,
  not_one_of as excluded,
  confirmed,
  min_value as minVal,
  max_value as maxVal,
  min,
  max,
  alpha_spaces as alphaSpaces,
  email,
} from "@vee-validate/rules";

export default {
  // app.use(x,{y: 1}): x->app y->1
  // install(app, options) {
  install(app) {
    app.component("VeeForm", VeeForm);
    app.component("VeeField", VeeField);
    app.component("ErrorMessage", ErrorMessage);

    // 全局注册规则
    defineRule("required", required);
    defineRule("tos", required);
    defineRule("min", min);
    defineRule("max", max);
    defineRule("alpha_spaces", alphaSpaces);
    defineRule("email", email);
    defineRule("min_value", minVal);
    defineRule("max_value", maxVal);
    defineRule("confirmed", confirmed);
    defineRule("excluded", excluded);
    defineRule("country_excluded", excluded);

    configure({
      generateMessage: (ctx) => {
        const messages = {
          required: `The field ${ctx.field} is required`,
          min: `The field ${ctx.field} is too short`,
          max: `The field ${ctx.field} is too long`,
          alpha_spaces: `The field ${ctx.field} may only contain alphabetical characters and spaces`,
          email: `The field ${ctx.field} must be a valid email`,
          min_value: `The field ${ctx.field} is too low`,
          max_value: `The field ${ctx.field} is too high`,
          excluded: `You are not allowed to use this value for the field ${ctx.field}`,
          country_excluded: `Due to restrctions, we do not accept users from this location`,
          passwords_mismatch: `The passwords don't match`,
          tos: `You must accept the Terms of Service`,
        };

        const message = messages[ctx.rule.name]
          ? messages[ctx.rule.name]
          : `The field ${ctx.field} is invalid`;

        return message;
      },
    });
  },
};
```

```shell
npm i @vee-validate/rules
```

```html

<script>
  import { ErrorMessage } from "vee-validate"
  import useUserStore from '@/stores/user'
  import { mapActions } from 'pinia'

  export default {
    data() {
      return {
        activeTabClass: 'bg-blue-600',
        tab: 'login',
        // 指定vee-form里的vee-feild的规则
        // key是vee-feild的name属性,值是vee-feild要用的规则名
        schema: {
          name: 'required|min:3|max:12|alpha_spaces',
          email: 'required|min:3|max:30|email',
          // age: '',
          password: 'required|min:3|max:30',
          confirm_password: 'confirmed:@password',
          gender: 'required',
          accept: 'required'
        },
        loginSchema: {
          password: 'required|min:3|max:30',
          email: 'required|min:3|max:30|email',
        }
      }
    },
    methods: {
      ...mapActions(useUserStore, {
        createUser: 'register',
        login: "login"
      }),
      changeTab() {
        if (this.tab === 'login') {
          this.tab = 'register'
        } else {
          this.tab = 'login'
        }
      },
      // register(values) {
      //   console.log(values)
      // },
      // login(values) {
      //   console.log(values)
      // }
    },
    components: { ErrorMessage }
  }
</script>

<template>
  <div class="py-4 text-left px-6">
    <!-- Tabs -->
    <ul class="flex flex-wrap mb-4">
      <li @click="tab='login'" class="flex-auto text-center">
        <a
          class="block rounded py-3 px-4 transition"
          :class="{'bg-blue-600 text-white':tab==='login','text-black':tab!=='login'}"
          href="#"
        >Login</a
        >
      </li>
      <li @click="tab='register'" class="flex-auto text-center">
        <a class="block rounded py-3 px-4 transition"
           :class="{'bg-blue-600 text-white':tab==='register' ,'text-black':tab!=='register'}"
           href="#">Register</a>
      </li>
    </ul>
    <!-- Login Form -->
    <vee-form :validation-schema="loginSchema" @submit="login" v-show="tab === 'login'">
      <!-- Email -->
      <div class="mb-3">
        <label class="inline-block mb-2">Email</label>
        <vee-field
          name="email"
          type="email"
          class="block w-full py-1.5 px-3 text-gray-800 border border-gray-300 transition duration-500 focus:outline-none focus:border-black rounded"
          placeholder="Enter Email"
        />
        <!-- 错误信息 -->
        <ErrorMessage class="text-red-600" name="email" />
      </div>
      <!-- Password -->
      <div class="mb-3">
        <label class="inline-block mb-2">Password</label>
        <vee-field
          name="password"
          type="password"
          class="block w-full py-1.5 px-3 text-gray-800 border border-gray-300 transition duration-500 focus:outline-none focus:border-black rounded"
          placeholder="Enter Password"
        />
        <!-- 错误信息 -->
        <ErrorMessage class="text-red-600" name="password" />
      </div>
      <button
        type="submit"
        class="block w-full bg-purple-600 text-white py-1.5 px-3 rounded transition hover:bg-purple-700"
      >
        Submit
      </button>
    </vee-form>
    <!-- Registration Form -->
    <vee-form v-show="tab === 'register'" @submit="createUser" :validation-schema="schema">
      <!-- Name -->
      <div class="mb-3">
        <label class="inline-block mb-2">Name</label>
        <vee-field
          name="name"
          type="text"
          class="block w-full py-1.5 px-3 text-gray-800 border border-gray-300 transition duration-500 focus:outline-none focus:border-black rounded"
          placeholder="Enter Name"
        />
        <!-- 错误信息 -->
        <ErrorMessage class="text-red-600" name="name" />
      </div>
      <!-- Email -->
      <div class="mb-3">
        <label class="inline-block mb-2">Email</label>
        <vee-field
          name="email"
          type="email"
          class="block w-full py-1.5 px-3 text-gray-800 border border-gray-300 transition duration-500 focus:outline-none focus:border-black rounded"
          placeholder="Enter Email"
        />
        <!-- 错误信息 -->
        <ErrorMessage class="text-red-600" name="email" />
      </div>
      <!-- Password -->
      <div class="mb-3">
        <label class="inline-block mb-2">Password</label>
        <vee-field
          name="password"
          type="password"
          class="block w-full py-1.5 px-3 text-gray-800 border border-gray-300 transition duration-500 focus:outline-none focus:border-black rounded"
          placeholder="Enter Password"
        />
        <!-- 错误信息 -->
        <ErrorMessage class="text-red-600" name="password" />
      </div>
      <!-- Confirm Password -->
      <div class="mb-3">
        <label class="inline-block mb-2">Confirm Password</label>
        <vee-field
          name="confirm_password"
          type="password"
          class="block w-full py-1.5 px-3 text-gray-800 border border-gray-300 transition duration-500 focus:outline-none focus:border-black rounded"
          placeholder="Confirm Password"
        />
        <!-- 错误信息 -->
        <ErrorMessage class="text-red-600" name="confirm_password" />
      </div>
      <!-- Gender -->
      <div class="mb-3">
        <label class="inline-block mb-2">Gender</label>
        <vee-field
          as="select"
          name="gender"
          class="block w-full py-1.5 px-3 text-gray-800 border border-gray-300 transition duration-500 focus:outline-none focus:border-black rounded"
        >
          <option value="0">girl</option>
          <option value="1">boy</option>
        </vee-field>
        <!-- 错误信息 -->
        <ErrorMessage class="text-red-600" name="gender" />
      </div>
      <!-- Accept -->
      <div class="mb-3">
        <vee-field
          type="checkbox"
          value="1"
          name="accept"
          class="w-4 h-4 float-left mt-1 rounded"
        />
        <label class="inline-block mb-2">Accept terms of service</label>
        <!-- 错误信息 -->
        <ErrorMessage class="text-red-600" name="accept" />
      </div>
      <button
        type="submit"
        class="block w-full bg-purple-600 text-white py-1.5 px-3 rounded transition hover:bg-purple-700"
      >
        Submit
      </button>
    </vee-form>
  </div>
</template>

<style scoped>

</style>
```

> use action to register or login

```js
// stores/user.js
import { defineStore } from "pinia";

export default defineStore("user", {
  state: () => ({
    //用户是否登录
    userLoggedIn: false,
  }),
  actions: {
    async register(values) {
      // await auth.register(values.email, values.password);
      console.log(values)

      this.userLoggedIn = true;
    },
    async login(values) {
      // 请求后端
      // await auth.login(values.email, values.password);
      console.log(values)

      this.userLoggedIn = true;
    },
  },
})
``` 

# axios

```shell
npm i axios
```

# router

```js
// main.js
import "./assets/base.css";
import { createApp } from 'vue'

import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(router)

app.mount('#app')
```

```js
// router/interceptor.js.js
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import('../views/AboutView.vue')
    },
    {
      path: '/login',
      name: 'login',
      component: () => import('../views/LoginView.vue')
    },
    {
      path: '/404',
      name: '404',
      component: () => import('../views/404.vue'),
      beforeEnter: (to, from, next) => {
        console.log('Router Guard')
        console.log(to, from)

        next()
      }
    },
    {
      path: '/:catchAll(.*)*',
      // 上面的都匹配不到，就重定向到404
      redirect: { name: '404' }
    }
  ]
})

// 全局路由守卫
router.beforeEach((to, from, next) => {
  console.log('Global Guard')
  console.log(to, from)

  next()
})

export default router
```

## router guard

```js
// router/interceptor.js.js
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    // ...
    {
      path: '/404',
      name: '404',
      component: () => import('../views/404.vue'),
      beforeEnter: (to, from, next) => {
        console.log('Router Guard')
        console.log(to, from)

        next()
      }
    },
    {
      path: '/:catchAll(.*)*',
      // 上面的都匹配不到，就重定向到404
      redirect: { name: '404' }
    }
  ]
})

// 全局路由守卫
router.beforeEach((to, from, next) => {
  console.log('Global Guard')
  console.log(to, from)

  next()
})

export default router
```

```html 

<script>
  export default {
    name: '404 not found',
    beforeRouteEnter(to, from, next) {
      console.log('beforeRouteEnter Guard')
      next()
    }
  }
</script>
```

## Route Meta Fields

```html

<script>
  import useUserStore from '@/stores/user'
  import { mapActions } from "pinia";

  export default {
    name: '404 not found',
    beforeRouteEnter(to, from, next) {
      const store = useUserStore()
      console.log('beforeRouteEnter Guard')
      if (store.userLoggedIn) {
        next()
      } else {
        next({ name: 'login' })
      }
    },
    data() {
      return {
        userStore: useUserStore()
      }
    },
    methods: {
      ...mapActions(useUserStore, {
        signOut: "logout"
      }),
      logout() {
        this.signOut()
        this.$router.push({ name: 'login' })
      }
    }
  }
</script>

<template>
  <main>
    hello world
    <button class="bg-cyan-200 rounded p-2" @click="logout">logout</button>
  </main>
</template>
```

```js
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import('../views/AboutView.vue'),
      // 定义meta数据
      meta: {
        // 是否需要登录访问
        requiresAuth: true
      }
    }
  ]
})

// ...

export default router
```

```html

<script>
  export default {
    name: 'Auth',
    beforeRouteEnter(to, from, next) {
      const store = useUserStore()
      console.log('beforeRouteEnter Guard')
      if (to.meta.requiresAuth && !store.userLoggedIn) {
        next(vm => {
          vm.$router.push({ name: 'login' })
        })
      } else {
        next()
      }
    }
  }
</script>
```

# file upload component

```html

<template>
  <div class="bg-white rounded border border-gray-200 relative flex flex-col">
    <div class="px-6 pt-6 pb-5 font-bold border-b border-gray-200">
      <span class="card-title">Upload</span>
      <i class="fas fa-upload float-right text-green-400 text-2xl"></i>
    </div>
    <div class="p-6">
      <!-- Upload Dropbox -->
      <div
        :class="{ 'bg-green-400 border-green-400 border-solid': is_dragover }"
        @drag.prevent.stop=""
        @dragstart.prevent.stop=""
        @dragend.prevent.stop="is_dragover = false"
        @dragover.prevent.stop="is_dragover = true"
        @dragenter.prevent.stop="is_dragover = true"
        @dragleave.prevent.stop="is_dragover = false"
        @drop.prevent.stop="upload"
        class="w-full px-10 py-20 rounded text-center
          cursor-pointer border border-dashed border-gray-400
          text-gray-400 transition duration-500 hover:text-white
          hover:bg-green-400 hover:border-green-400 hover:border-solid"
      >
        <h5>Drop your files here</h5>
      </div>
      <hr class="my-6" />
      <!-- Progess Bars -->
      <div class="mb-4" v-for="upload in uploads" :key="upload.name">
        <!-- File Name -->
        <div class="font-bold text-sm" :class="upload.text_class">
          <i :class="upload.icon"></i>{{ upload.name }}
        </div>
        <div class="flex h-4 overflow-hidden bg-gray-200 rounded">
          <!-- Inner Progress Bar -->
          <div
            class="transition-all progress-bar"
            :class="upload.variant"
            :style="{ width: upload.current_progress + '%' }"
          ></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import axios from '../api/interceptor'

  export default {
    name: 'Upload',
    props: {
      authorization: {
        type: String
      },
      action: {
        type: String,
        required: true
      },
      onSuccess: {
        type: Function
      },
      onError: {
        type: Function
      }
    },
    data() {
      return {
        // 拖动到upload组件上方时
        is_dragover: false,
        // 上传中的文件
        uploads: []
      }
    },
    methods: {
      // changepic(obj) {
      //   //console.log(obj.files[0]);//这里可以获取上传文件的name
      //   var newsrc = getObjectURL(obj.files[0]);
      //   document.getElementById('show').src = newsrc;
      // },
      // //建立一個可存取到該file的url
      // getObjectURL(file) {
      //   var url = null;
      //   // 下面函数执行的效果是一样的，只是需要针对不同的浏览器执行不同的 js 函数而已
      //   if (window.createObjectURL != undefined) { // basic
      //     url = window.createObjectURL(file);
      //   } else if (window.URL != undefined) { // mozilla(firefox)
      //     url = window.URL.createObjectURL(file);
      //   } else if (window.webkitURL != undefined) { // webkit or chrome
      //     url = window.webkitURL.createObjectURL(file);
      //   }
      //   return url;
      // },
      upload($event) {
        this.is_dragover = false
        const files = [...$event.dataTransfer.files]
        files.forEach(file => {
          // if (file.type != 'audio/mpeg') {
          //   return
          // }
          // 保存到队列
          // 一个元素表示一个进度条数据
          const uploadIndex = // 当前上传的文件的索引
            // 一个元素表示一个进度条数据
            this.uploads.push({

              current_progress: 0,
              name: file.name,
              variant: 'bg-blue-400',
              icon: 'fas fa-spinner fa-spin',
              text_class: ''
            }) - 1
          // 上传逻辑应该用户传
          axios({
            method: 'post',
            url: this.action,
            data: {
              file: file
            },
            headers: {
              'Content-Type': 'multipart/form-data',
              // 用户可以自己传token
              'Authorization': localStorage.getItem("authorization") || this.$props.authorization
            },
            onUploadProgress: (progressEvent) => {
              // if (progressEvent.lengthComputable) {
              let complete
              this.uploads[uploadIndex].current_progress = complete =
                (progressEvent.loaded / progressEvent.total * 100).toFixed(1)
              // (((progressEvent.loaded / progressEvent.total) * 100) | 0)
              if (complete >= 100) {
                // 上传成功
                this.uploads[uploadIndex].variant = "bg-green-400";
                this.uploads[uploadIndex].icon = "fas fa-check";
                this.uploads[uploadIndex].text_class = "text-green-400";
              }
            }
            // }
          })
            .catch((error) => {
              // aop 用户传入处理方法
              if (this.$props.onError) this.$props.onError(error)
              this.uploads[uploadIndex].variant = "bg-red-400";
              this.uploads[uploadIndex].icon = "fas fa-times";
              this.uploads[uploadIndex].text_class = "text-red-400";
              console.log(error);
            })
            // 监听函数才能拿到this.$props
            .then((response) => {
              if (this.$props.onSuccess) this.$props.onSuccess(response)
            })
        })
        // console.log(files)
      }
    }
  }
</script>
```

```html

<upload action="http://localhost:9090/upload" :on-success="(res)=>console.log(res)"></upload>
```

# Internationalization 国际化

## install

```shell
npm i vue-i18n@9
```

## includes/i18n.js

```js
import { createI18n } from "vue-i18n";
import en from "@/locales/en.json";
import cn from "@/locales/cn.json";

export default createI18n({
  locale: "en",
  fallbackLocale: "en",
  messages: {
    en,
    cn,
  },
});
```

## main.js

```js
const app = createApp(App)

// ...
app.use(i18n)

app.mount('#app')
```

## locales/en.json

```json
{
  "error": {
    "nofound": "404 NOT FOUND!"
  },
  "info": {
    "translate": "switch to cn"
  }
}
```

## includes/cn.json

```json
{
  "error": {
    "nofound": "页面跑丢了~!"
  },
  "info": {
    "translate": "切换为英文"
  }
}
```

## app.vue

```html

<script>
  export default {
    name: 'AppHeader',
    methods: {
      translate() {
        if (this.$i18n.locale === 'en') {
          this.$i18n.locale = 'cn'
        } else {
          this.$i18n.locale = 'en'
        }
      },
      toggleAuthModal() {
        // ...
      }
    }
  }
</script>

<template>
  <header>
    <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />

    <div class="wrapper">
      <div>
        <!---->
        <button @click="translate">{{ $t('info.translate') }}</button>
      </div>
      <hr class="m-4">
      <!---->
    </div>
  </header>
  <!-- 显示路由内容 outlet -->
  <RouterView />
</template>
```

# PWA

```shell
npm i vite-plugin-pwa -D
```

```js
// vite.config.js
import { fileURLToPath, URL } from 'node:url'

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    VitePWA({
      registerType: 'autoUpdate',
      devOptions: {
        // 生成清单文件
        enabled: true
      },
      manifest: {
        name: "vue-quick-start",
        theme_color: '#ff5e3a',
        icons: [
          {
            src: 'assets/logo.png',
            size: '192x192',
            type: 'image/png'
          }
        ]
      },
      workbox: {
        globPatterns: ['**/*.{js,css,html,png,jpg}']
      }
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})
```

![](README/438dc912.png)

```shell
npm run build
``` 

# Progress Bar 加载进度条

```shell
npm i nprogress
```

```js
// main.js
import 'nprogress/nprogress.css'
import progressBar from "./includes/progress-bar";

progressBar(router)
```

# 优化

## 自动导出组件

```js
// includes/_globals.js
// 自动导出组件
export default {
  install(app) {
    const baseComponents = import.meta.glob("../components/base/*.vue", {
      eager: true,
    });
    Object.entries(baseComponents).forEach(([path, module]) => {
      const componentName = _.upperFirst(
        _.camelCase(
          path
            .split("/")
            .pop()
            .replace(/\.\w+$/, "")
        )
      );
      // ../components/base/Button.vue Button
      // console.log(path, componentName);

      // export default
      app.component(`Base${componentName}`, module.default);
    });
  },
}
```

## 让组件和数据一同加载

> song.vue 的 created 用 beforeRouterEnter 替代,这是为了在低速机型上，让组件和数据一同加载，而不是组件加载完又慢慢填数据

```js
<script>
  // ...
  export default {
  name: 'Song',
  data () {
  return {
  // ...
}
},
  computed: {
  ...mapState(useUserStore, ['userLoggedIn']),
  sortedComments () {
  // ...
}
},
  async beforeRouteEnter (to, from, next) {
  const docSnapshot = await songsCollection.doc(to.params.id).get()

  next(vm => {
  if (!docSnapshot.exists) {
  vm.$router.push({name: 'home'})
  return
}

  // 如果路由带有query参数sort，就用路由的值，否则默认为1
  const {sort} = vm.$route.query
  vm.sort = sort === '1' || sort === '2' ? sort : '1'

  vm.song = docSnapshot.data()
  vm.getComments()
})
},
  methods: {
  async addComment (values, {resetForm}) {
  // ...
},
  async getComments () {
  // ...
},
  ...mapActions(usePlayerStore, ['newSong'])
},
  // 跟踪组件中属性变化
  watch: {
  // ...
}
}
</script>
```

## 动态路由导入

> 动态路由导入,可以减少包的大小

> 在 home 页面，其他组件也默认加载，但是我们却没有使用其他组件，所以浪费了性能

> 打包时，所有组件被打包到一个文件，我们可以使用 chunks，只有被用到才加载到 bundle(打包后的文件)
![](README/c793422f.png)

## 进度条

> chunk 的缺点之一是页面之间的加载时间更长，因为没有一开始加载所有组件，所以某页面第一次跳转时需要向服务器下载需要的组件（后续再跳转用的是缓存里的组件）

> 优雅的解决方式是添加加载进度条

```shell
npm i nprogress
```

```js
// includes/progress-bar.js
import NProgress from "nprogress";

export default (router) => {
  router.beforeEach((to, from, next) => {
    NProgress.start();
    next();
  });

  router.afterEach(NProgress.done);
};
```

## 006 Code Coverage

> 使用谷歌开发者工具检测代码覆盖率，从而决定哪些组件应该被动态导入，哪些不用

![](README/036f9498.png)
![](README/925f51d6.png)

> 红色表示未使用的代码
![](README/9536d3ee.png)
![](README/6f94690e.png)

## 007 Rollup Visualizer

```shell
npm i -D rollup-plugin-visualizer
```

![](README/9ce647e1.png)

> 该插件可以可视化打包后文件的大小分布情况

```shell
npm run build
```

![](README/6fbeef12.png)
![](README/1db766ae.png)

> 根据树状图优化使用了 lodash 的地方，改为导入特定函数，这样可以减少导入的内容

# test

# composition api

> 组合式 api 适合结合 ts

> 组合式适合构筑大型组件,将相同逻辑结合在一块区域(类似 react hook?)

## 002 Mixins

![](20230711154648.png)

```html
// app.vue
<template>
  <div id="app">
    <div class="scrollPosition">{{ offset }}</div>
  </div>
</template>
<script>
  import mixin from '@/mixin'

  export default {
    name: 'app',
    mixins: [mixin],
    data() {
      return {
        // 如果这里定义了mixin里有的,则mixin的该属性不会生效
        // 在这里的mixin不会被共享到其他组件
        // 不同组件可以用同样的mixin
        offset: 0
      }
    },
    mounted() {
      // 组件内部的生命周期函数和mixin定义的都会生效
      console.log('App mounted lifecycle function')
    }
  }
</script>
<style scoped>
  #app {
    width: 100%;
    height: 3000px;
    position: relative;
  }

  .scrollPosition {
    /* 滚动时固定 */
    position: fixed;
    left: 10px;
    rigth: 10px;
  }
</style>
```

```js
// mixin.js
export default {
  data() {
    return {
      offset: 0,
    };
  },
  mounted() {
    console.log("mixin mounted");
    window.addEventListener("scroll", this.update);
  },
  methods: {
    update() {
      this.offset = window.pageYOffset;
    },
  },
};
```

> mixin 会互相覆盖,但是不会提示你,所以当使用多个 mixin,就得注意命名问题,组合 api 可以解决

## 003 Reactive References

> vue 的组合式 api 定义的变量默认不是响应式的,我们需要将其定义为响应式,否则不能动态更新视图(值可以变,但不会重新渲染)

```html
// app.vue
<template>
  <div id="app">
    <p>{{ num }}</p>
    <button @click.prevent="increment">click me</button>
  </div>
</template>
<script>
  import { ref } from 'vue'

  export default {
    name: 'App',
    setup() {
      // 非响应式,不会动态更新视图
      // let num = 0
      // 响应式
      let num = ref(0)

      function increment() {
        num.value++
        console.log(num)
      }

      return {
        num,
        increment
      }
    }
  }
</script>
```

## 004 The Reactive Function

ref可以基础类型和对象类型, reactive只能对象类型

```html
// app.vue
<template>
  <div id="app">
    <p>{{ num }}</p>
    <button @click.prevent="increment">click me</button>
    <p>{{ name }}</p>
  </div>
</template>
<script>
  import { ref, reactive, toRefs } from 'vue'

  export default {
    name: 'App',
    setup() {
      // ref适用于基础类型,取值需要变量名.value
      let num = ref(0)

      function increment() {
        num.value++
        console.log(num)
      }

      // reactive适用于对象类型,取值直接obj.属性名
      const user = reactive({
        name: 'John',
        age: 20
      })

      setTimeout(() => {
        user.name = 'Luis'
      }, 3000)

      return {
        num,
        increment,
        // 推荐展开对象,而不是传递整个对象
        // 展开对象后失去响应式特性,使用toRefs来变成响应式
        ...toRefs(user)
      }
    }
  }
</script>
```

## 005 Watchers and Computed Properties

```js
// app.vue
<template>
  <div id="app">
    <p>{{ num }}</p>
    <p>{{ double }}</p>
    <button
    @click.prevent="increment">click me
  </button>
  <p>{{ name }}</p>
  <p>
    <input type="text" v-model="phrase"/>
  </p>
  <p>{{ reversedPhrase }}</p>
</div>
</template>
<script>
  import {ref, reactive, watchEffect, toRefs, watch, computed} from 'vue'
  export default {
  name: 'App',
  setup () {
  // ref适用于基础类型,取值需要变量名.value
  let num = ref(0)

  function increment () {
  num.value++
  console.log(num)
}

  const double = computed(() => {
  return num.value * 2
})

  // reactive适用于对象类型,取值直接obj.属性名
  const user = reactive({
  name: 'John',
  age: 20
})

  setTimeout(() => {
  user.name = 'Luis'
}, 3000)

  const phrase = ref('')
  const reversedPhrase = ref('')

  watchEffect(() => {
  reversedPhrase.value = phrase.value.split('').reverse().join('')
})

  // watch([phrase], ([newVal, oldVal]) => {
  //   reversedPhrase.value = phrase.value.split('').reverse().join('')
  // })

  return {
  num,
  increment,
  // 推荐展开对象,而不是传递整个对象
  // 展开对象后失去响应式特性,使用toRefs来变成响应式
  ...toRefs(user),
  phrase,
  reversedPhrase,
  double
}
}
}
</script>
```

## 006 Lifecycle Functions

![](20230711170026.png)
![](20230711185205.png)

```html
// app.vue
<template>
  // ...
</template>
<script>
  import {
    ref,
    reactive,
    watchEffect,
    toRefs,
    watch,
    computed,
    onBeforeMount,
    onMounted
  } from 'vue'

  export default {
    name: 'App',
    setup() {
      onBeforeMount(() => {
        console.log('beforeMount')
      })
      onMounted(() => {
        console.log('mounted')
      })

      // ...

      return {
        // ...
      }
    }
  }
</script>
```

## 007 Props

```html
// components/alert.vue
<template>
  <div v-if="!flag" style="color: red">Name Changed!</div>
</template>
<script>
  import { computed } from 'vue'

  export default {
    props: ['user'],
    setup(props) {
      const flag = computed(() => {
        return props.user.name === 'John'
      })

      return {
        flag
      }
    }
  }
</script>
```

## 008 Template Refs

```html

<template>
  <div id="app">
    // ...

    <button ref="btn">Button</button>
  </div>
</template>
<script>
  import {
    ref,
    reactive,
    watchEffect,
    toRefs,
    watch,
    computed,
    onBeforeMount,
    onMounted
  } from 'vue'

  import AppAlert from '@/components/Alert.vue'

  export default {
    name: 'App',
    components: {
      AppAlert
    },
    setup() {
      const btn = ref(null)

      onMounted(() => {
        console.log('mounted')

        btn.value.addEventListener('click', () => {
          console.log('button clicked')
        })
      })

      // ...

      return {
        // ...
      }
    }
  }
</script>
```

## 009 Emitting Events

![](20230711192854.png)

## 010 Advantages of the Composition API

![](20230711192911.png)
![](20230711193957.png)

```html
// app.vue
<template>
  <div id="app">
    <p>{{ num }}</p>
    <p>{{ double }}</p>
    <button @click.prevent="increment">click me</button>
    <p>{{ name }}</p>
    <p>
      <input type="text" v-model="phrase" />
    </p>
    <p>{{ reversedPhrase }}</p>

    <app-alert :user="user" />

    <button ref="btn">Button</button>
  </div>
</template>
<script>
  import {
    ref,
    reactive,
    watchEffect,
    toRefs,
    watch,
    computed,
    onBeforeMount,
    onMounted
  } from 'vue'

  import AppAlert from '@/components/Alert.vue'
  import { useNumber } from './hooks/number'
  import { usePhrase } from './hooks/phrase'

  export default {
    name: 'App',
    components: {
      AppAlert
    },
    setup() {
      // ...

      const { num, increment, double } = useNumber()
      // 出现重名变量会报错，可以导入时起别名，比mixin好用
      const { phrase, reversedPhrase, num: phraseNum } = usePhrase()
      return {
        num,
        increment,
        ...toRefs(user),
        phrase,
        reversedPhrase,
        double,
        user,
        btn,
        phraseNum
      }
    }
  }
</script>
```

```js
// hooks/number.js
import { computed, ref } from "vue";

export const useNumber = () => {
  let num = ref(0);

  function increment() {
    num.value++;
    console.log(num);
  }

  const double = computed(() => {
    return num.value * 2;
  });

  return { num, increment, double };
};
```

```js
// hooks/phrase.js
import { ref, watchEffect } from "vue";

export const usePhrase = () => {
  const phrase = ref("");
  const reversedPhrase = ref("");
  const num = ref("");

  watchEffect(() => {
    reversedPhrase.value = phrase.value.split("").reverse().join("");
  });

  return { phrase, reversedPhrase, num };
};
```

## 011 Router Hooks

```html
// views/about.vue
<template>
  <div class="">
    <h1>{{ route.params.member }}</h1>
  </div>
</template>
<script>
  import { useRoute, useRouter } from 'vue-router'

  export default {
    setup() {
      const route = useRoute() // this.$route
      const router = useRouter() // this.$router

      router.push({
        hash: '#test'
      })
      return {
        route
      }
    }
  }
</script>
```

```html
// app.vue
<template>
  <div id="nav">
    <router-link to="/">Home</router-link>
    <router-link to="/about/admin">About</router-link>
  </div>
  <router-view></router-view>
</template>
<style scoped>
  .active {
    color: red;
  }
</style>
```

![](20230711201405.png)

## 012 Pinia Hooks

```js
// stores/counter.js
import { defineStore } from "pinia";

export const useCounterStore = defineStore({
  id: "counter",
  state: () => ({
    counter: 0,
  }),
  getters: {
    doubleCount: (state) => state.counter * 2,
  },
  actions: {
    increment() {
      this.counter++;
    },
  },
});
```

```html
// views/about.vue
<template>
  <div class="">
    <h1>{{ route.params.member }}</h1>
    <p>{{ store.counter }}</p>
    <p>{{ store.doubleCount }}</p>
    <button @click.prevent="store.increment">Press me!</button>
  </div>
</template>
<script>
  import { useCounterStore } from '@/stores/counter'
  import { useRoute, useRouter } from 'vue-router'

  export default {
    setup() {
      const route = useRoute() // this.$route
      const router = useRouter() // this.$router
      const store = useCounterStore()

      router.push({
        hash: '#test'
      })
      return {
        route,
        store
      }
    }
  }
</script>
```

![](20230711203326.png)

## 013 Verifying Reactivity

```html
// views/home.vue
<template>
  <div class="">{{ num }}</div>
</template>
<script setup>
  import { useNumber } from '../hooks/number'

  const { num } = useNumber()
</script>
```

```js
// hooks/number.js
import { computed, ref, isRef, isReactive, reactive } from "vue";

export const useNumber = () => {
  let num = ref(0);
  const accounts = reactive({
    checking: 3242,
    savings: 242,
  });

  // 判断是不是响应式
  console.log(isRef(num));
  console.log(isReactive(accounts));

  function increment() {
    num.value++;
    console.log(num);
  }

  const double = computed(() => {
    return num.value * 2;
  });

  return { num, increment, double };
};
```

![](20230711204913.png)

## 014 The setup Attribute

```html
// app.vue
<template>
  <div id="app">
    <p>{{ num }}</p>
    <p>{{ double }}</p>
    <button @click.prevent="increment">click me</button>
    <p>{{ name }}</p>
    <p>
      <input type="text" v-model="phrase" />
    </p>
    <p>{{ reversedPhrase }}</p>

    <app-alert :user="user" />

    <button ref="btn">Button</button>
  </div>
</template>
<script setup>
  import {
    ref,
    reactive,
    watchEffect,
    toRefs,
    watch,
    computed,
    onBeforeMount,
    onMounted
  } from 'vue'

  import AppAlert from '@/components/Alert.vue'
  import { useNumber } from './hooks/number'
  import { usePhrase } from './hooks/phrase'

  const btn = ref(null)

  onBeforeMount(() => {
    console.log('beforeMount')
  })
  onMounted(() => {
    console.log('mounted')

    btn.value.addEventListener('click', () => {
      console.log('button clicked')
    })
  })

  // reactive适用于对象类型,取值直接obj.属性名
  const user = reactive({
    name: 'John',
    age: 20
  })

  setTimeout(() => {
    user.name = 'Luis'
  }, 3000)

  const { num, increment, double } = useNumber()
  // 出现重名变量会报错，可以导入时起别名，比mixin好用
  const { phrase, reversedPhrase, num: phraseNum } = usePhrase()

  const { name } = toRefs(user)
</script>
```

# 22 - Component Design Patterns

## 001 Section Overview

![](20230711205428.png)
![](20230711205439.png)

## 002 Controlled Components

> 受控组件就是自己没有状态,而是由父组件提供,并且更新值是触发父类的值的更新

![](20230712055406.png)

```js
// components/EmailInput.vue
<template>
  <input
    type="email"
    class="form-control"
    placeholder="E-mail"
  :value="modelValue"
  @input="update($event)"
  :class="{
  'is-valid': modelValue.length >= 4 && modelValue.length > 0,
  'is-invalid': modelValue.length < 4 && modelValue.length > 0
}"
  />
</template>
<script>
  export default {
  name: 'EmailInput',
  props: ['modelValue'],
  methods: {
  update ($event) {
  this.$emit('update:modelValue', $event.target.value)
}
}
}
</script>
```

```js
// app.vue
<template>
  <div id="app" class="row d-flex justify-content-center">
    <div class="col-md-6 mt-3">
      <div class="card">
        <div class="card-header">Newsletter</div>
        <div class="card-body">
          <form
          @submit.prevent="submit">
          <div class="mb-2">
            <input
              type="text"
              class="form-control"
              placeholder="Name"
            :value="newsletterName"
            @input="newsletterName = $event.target.value"
            />
          </div>
          <div class="mb-2">
            <email-input v-model="newsletterEmail"/>
            <!-- <email-input
              :modelValue="newsletterEmail"
              @update:modelValue="newsletterEmail = $event"
            /> -->
          </div>
          <button type="submit" class="btn btn-primary">Submit</button>
        </form>
      </div>
    </div>
  </div>
</div>
</template>

<script>
  import EmailInput from '@/components/EmailInput.vue'
  export default {
  name: 'App',
  components: {EmailInput},
  data () {
  return {
  newsletterName: '',
  newsletterEmail: ''
}
},
  methods: {
  submit () {
  console.log('Newletter Submitted', {
  name: this.newsletterName,
  email: this.newsletterEmail
})
}
}
}
</script>

<style src="bootstrap/dist/css/bootstrap.css"></style>
```

> v-model 手动指定传递的变量名

![](20230712063513.png)
![](20230712063535.png)

## 003 Separation of Concerns

![](20230712063609.png)
![](20230712063647.png)

> 解耦 ui 和业务逻辑,这样重写 ui 或逻辑时不会大改

![](20230712064242.png)

```js
// validate-email.js
export default function validateEmail(email) {
  return email.length > 0 && email.length >= 4;
}
```

## 004 Third-Party Libraries as Controlled Components

> 将不支持 vue 的第三方库(可能是原生 js 写的),转为 vue 受控组件,然后整合进项目

![](20230712064323.png)

```shell
npm i @joeattardi/emoji-button
```

```js
// app.vue
<template>
  <div id="app" class="row d-flex justify-content-center">
    <div class="col-md-5 mt-3">
      <div class="card">
        <div class="card-header">Emoji Selector</div>
        <div class="card-body">
          <form
          @submit.prevent="submit">
          <div class="mb-2">
            <emoji-input v-model="emoji"
            :options="{position: 'bottom'}" />
          </div>
          <button type="submit" class="btn btn-primary">Submit</button>
        </form>
      </div>
    </div>
  </div>
</div>
</template>

<script>
  import EmojiInput from './components/EmojiInput.vue'
  export default {
  name: 'App',
  components: {EmojiInput},
  data () {
  return {
  emoji: ''
}
},
  methods: {
  submit () {
  console.log('Emoji: ', this.emoji)
}
}
}
</script>

<style src="bootstrap/dist/css/bootstrap.css"></style>
```

```js
<template>
  <div class="input-group">
    <input
      type="text"
      class="form-control"
      readonly
    :value="modelValue.emoji"
    />
    <button class="btn btn-outline-secondary" type="button" ref="emojiBtn">
      {{ modelValue ? modelValue.emoji : 'Select' }}
    </button>
  </div>
</template>
<script>
  import {EmojiButton} from '@joeattardi/emoji-button'
  export default {
  name: 'EmojiInput',
  props: {
  modelValue: {
  required: true
},
  options: {
  default: function () {
  return {}
}
}
},
  mounted () {
  const picker = new EmojiButton(this.options)
  const btn = this.$refs.emojiBtn

  picker.on('emoji', emoji => {
  this.$emit('update:modelValue', emoji)
})
  btn.addEventListener('click', () => {
  picker.togglePicker(btn)
})
}
}
</script>
```

## 005 Moving Beyond Vue’s Event System

> 不使用 vue 提供的 api 来开发

![](20230712065623.png)

> 用 vue 的方式获取 dom 并自动聚焦

```js
// components/modal.vue
<template>
  <div class="modal"
  :style="{display: show ? 'block' : 'none'}">
  <div
    class="modal-dialog"
    style="z-index: 2000"
  @keydown.esc="close"
  tabindex="0"
  ref="modal"
  >
  <div class="modal-content">
    <div class="modal-header">
      <h5 class="modal-title">Awesome Title</h5>
      <button type="button" class="close"
      @click="close">
      <span>&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <p>Awesome content.</p>
  </div>
</div>
</div>
<div class="modal-backdrop show"></div>
</div>
</template>

<script>
  export default {
  name: 'AppModal',
  props: ['show'],
  methods: {
  close () {
  this.$emit('hide')
}
},
  watch: {
  // show值改变触发
  show (newVal) {
  if (newVal) {
  // dom更新完成后使用
  this.$nextTick(() => {
  // 聚集
  this.$refs.modal.focus()
})
}
}
}
}
</script>
<style scoped>
  .modal-dialog {
  outline: 0;
}
</style>
```

> 原生 js

```js
<template>
  <div class="modal"
  :style="{display: show ? 'block' : 'none'}">
  <div class="modal-dialog" style="z-index: 2000">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Awesome Title</h5>
        <button type="button" class="close"
        @click="close">
        <span>&times;</span>
      </button>
    </div>
    <div class="modal-body">
      <p>Awesome content.</p>
    </div>
  </div>
</div>
<div class="modal-backdrop show"></div>
</div>
</template>

<script>
  export default {
  name: 'AppModal',
  props: ['show'],
  methods: {
  close () {
  this.$emit('hide')
},
  handler (e) {
  if (e.code === 'Escape' && this.show) {
  this.close()
}
}
},
  created () {
  document.addEventListener('keydown', this.handler)
},
  unmounted () {
  document.removeEventListener('keydown', this.handler)
}
}
</script>
<style scoped>
  .modal-dialog {
  outline: 0;
}
</style>
```

## 006 Encapsulating Scrolling

> 在有上层元素显示时禁止背景的滚动

```js
// modal.vue
<template>
  <div class="modal"
  :style="{display: show ? 'block' : 'none'}">
  <div class="modal-dialog" style="z-index: 2000">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Awesome Title</h5>
        <button type="button" class="close"
        @click="close">
        <span>&times;</span>
      </button>
    </div>
    <div class="modal-body">
      <p>Awesome content.</p>
    </div>
  </div>
</div>
<div class="modal-backdrop show"></div>
</div>
</template>

<script>
  export default {
  name: 'AppModal',
  props: {
  show: {
  required: true
},
  scrollable: {
  default: false
}
},
  watch: {
  show: {
  // immediate:true; 立即执行,当刷新页面时会立即执行一次handler函数
  immediate: true,
  handler (newVal) {
  if (newVal && !this.scrollable) {
  document.body.style.setProperty('overflow', 'hidden')
} else {
  document.body.style.removeProperty('overflow')
}
}
}
},
  // ...
}
</script>
```

```js
// app.vue
<template>
  <div id="app">
    <p v-for="i in [1, 2, 3, 4, 5, 6, 7, 8, 9]"
    :key="i">
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minus, similique
    perspiciatis. Laudantium eligendi illum, quidem rem voluptas sapiente
    tempore accusamus pariatur sint eaque nesciunt quasi unde consectetur
    atque porro eius. Lorem ipsum dolor sit amet consectetur adipisicing elit.
    Eligendi vel quasi, doloremque error accusantium adipisci enim possimus
    magni vitae non sunt ullam, quam laborum eveniet aliquam perspiciatis!
    Velit, sapiente veniam? Lorem ipsum dolor sit amet consectetur adipisicing
    elit. A sapiente adipisci impedit, possimus excepturi est voluptatem
    fugiat placeat, recusandae doloremque porro. Asperiores quas dignissimos
    eligendi, perferendis laudantium necessitatibus porro beatae!
  </p>
  <div class="mt-2 ml-2">
    <button type="button" class="btn btn-primary"
    @click="open = true">
    Open
  </button>
</div>

<app-modal :show = "open"
@hide
= "open = false"
:
scrollable = "true" / >
  < /div>
</template>

<script>
  import AppModal from '@/components/Modal.vue'

  export default {
  // ...
}
</script>

<style src="bootstrap/dist/css/bootstrap.css"></style>
```

## 007 The Teleport Component

![](20230712083522.png)

```js
// action.vue
<template>
  <div class="mt-2 ml-2">
    <button type="button" class="btn btn-primary"
    @click="openModal">
    Open
  </button>
</div>
</template>
<script>
  export default {
  name: 'AppAction',
  methods: {
  openModal () {
  this.$emit('open')
}
}
}
</script>
```

```js
// app.vue
<template>
  <div id="app">
    <app-action
    @open="open = true" />
    <app-modal
    :show="open" @hide="open = false" :scrollable="true" />
  </div>
</template>

<script>
  import AppModal from '@/components/Modal.vue'
  import AppAction from '@/components/Action.vue'

  export default {
  name: 'App',
  components: {
  AppModal,
  AppAction
},
  data () {
  return {
  open: true
}
}
}
</script>

<style src="bootstrap/dist/css/bootstrap.css"></style>
```

> 这种方式不易拓展

![](20230712083828.png)

> 如果子组件还有子组件,最底层的子组件要更新顶层的 app 的状态,需要传递多次 emit

![](20230712083939.png)
![](20230712084028.png)

> 使用 action 组件

![](20230712084049.png)

```js
// app.vue
<template>
  <div id="app">
    <app-action/>
  </div>
</template>

<script>
  import AppAction from '@/components/Action.vue'

  export default {
  name: 'App',
  components: {
  AppModal,
  AppAction
}
}
</script>

<style src="bootstrap/dist/css/bootstrap.css"></style>
```

```js
<template>
  <div class="mt-2 ml-2">
    <button type="button" class="btn btn-primary"
    @click="openModal">
    Open
  </button>
  <app-modal
  :show="open" @hide="open = false" />
</div>
</template>
<script>
  import AppModal from '@/components/Modal.vue'

  export default {
  name: 'AppAction',
  components: {
  AppModal
},
  methods: {
  openModal () {
  this.$emit('open')
}
},
  data () {
  return {
  open: true
}
}
}
</script>
<style scoped></style>
```

> 解决可能出现的 action 样式污染

![](20230712084305.png)

```js
<template>
  <div class="mt-2 ml-2" style="opacity: 0.5">
    <button type="button" class="btn btn-primary"
    @click="openModal">
    Open
  </button>
  <!-- 挂载到body标签,所以样式不会加上opacity -->
  <teleport to="body">
    <app-modal
    :show="open" @hide="open = false" />
  </teleport>
</div>
</template>
<script>
  import AppModal from '@/components/Modal.vue'

  export default {
  // ...
}
</script>
```

#