Vue -Ts入門 mixins (四)

mixin

混入 (mixin) 提供了一種非常靈活的方式，來分發 Vue 元件中的可複用功能。一個混入對象可以包含任意元件選項。當元件使用混入對象時，所有混入對象的選項将被“混合”進入該元件本身的選項。會把data / created / methods … 合并

建立一個mixin的檔案

myMixin.ts

import { Component, Vue } from 'vue-property-decorator';

@Component({
  filters:{
    Test(arg: string){
      return arg + "  我來刷點存在感"
    }
  }
})
export class MyMixin extends Vue{
  public beforeCreate() {
    console.log("beforeCreate 調用") // 前期混合注入 比如你想要的方法調用， vue-router也是在此注冊
  }
  public mixinTitle: string = "我是一個測試的mixin 标題";

  getMixinTitle(): void {
    console.log(this.mixinTitle) 
  }
}
           

Test1.ts

// 所有案例都接着上文

<template>
  <div class="test1-wrap">
    <div>{{ title }}</div>
    <div class="roleInfo">{{ roleInfo }}</div>
    <div v-for="(item, index) in roleArr" :key="index">
      <div>姓名:{{ item.name }}</div>
      <div>角色：{{ item.role }}</div>
    </div>
    <button @click="add(1)">點選</button>
    <Test2 titleFromTest1="我是從test1傳給子元件的值" @eventFromTest2="postMessage" />
   -----------------------------------------
+    <div>coder:{{ coder | Test }}</div> // myMixin 過濾器
+    <button @click="getMixinTitle"> 測試 </button>  // myMixin 方法
   -----------------------------------------
    <div>版本号：{{ version  }}</div>
    <div>{{ profile.user.firstNam }}</div>
    <div>{{ fullName }}</div>
    <ul>
      <li v-for="(item, index) in book" :key="index">
        <img :src="item.bookImg" alt="" />
        <div>{{ item.bookName }}</div>
        <div>{{ item.bookAuthor }}</div>
        <div>¥{{ item.bookPrice }}</div>
      </li>
    </ul>
    <router-link to="/about">跳轉about</router-link>
  </div>
</template>
<script lang="ts">
+ import { Vue, Component, Mixins } from "vue-property-decorator";
import Test2 from "./Test2.vue";
import { State, Action, Getter } from "vuex-class";
import { ProfileState, RootState } from "../store/types";
import { Route } from "vue-router";
import { MyMixin } from "../myMixin"


const namespace = "profile";

@Component({
  components: { Test2 }
})
+ export default class Test1 extends Mixins(MyMixin) { // 也可以支援多個mixin對象
  @State version!: RootState;
  @State coder!: RootState;
  @State profile!: ProfileState;

  @Getter("fullName", { namespace }) fullName!: string;

  @State("book", { namespace }) book!: object;
  @Action("fetchData", { namespace }) fetchData: any;

  title: string = "律師精英";
  roleArr: object[] = [
    { name: " 靳東", role: "羅槟" },
    { name: " 田雨", role: "何賽" },
    { name: " 孫淳", role: "封印" }
  ];

  beforeRouteEnter(to: Route, from: Route, next: () => void): void {

    Test1.a()
    next()
  }
  beforeRouteUpdate(to: Route, from: Route, next: () => void): void {
    console.log(this, "beforeRouteUpdate");
    next();
  }
  beforeRouteLeave(to: Route, from: Route, next: () => void): void {
    console.log(this, "beforeRouteLeave");
    next();
  }

  get roleInfo(): string {
    return this.title + "的演員清單";
  }
  add(a: number): void {
    alert(a);
  }
  postMessage(e: any): void {
    console.log(e);
  }
  static a(): void{
    console.log('22222')
  }
  mounted() {
    this.fetchData();
  }
}
</script>
<style scoped>
.test1-wrap {
  color: red;
}
.roleInfo {
  color: blue;
  padding: 10px 0;
}
</style>