vue-ts-demo1

重新建立了專案

vue-property-decorator 掘金

元件內使用 自定義事件

父元件

<ButtonDemo @add="add" @reduce="reduce" text="預設按鈕"></ButtonDemo>
  count = 0
  add() {
    this.count++
    // console.log(this)
  }
  reduce() {
    this.count--
  }

子元件

• @Emit 裝飾器 可以接收父元件傳遞的方法，而且這個方法內可以寫一些語句，這個方法會和父元件傳遞過來的 事件合併。
• 以前寫的時候只能在 handle 方法裡面操作自己的事，上面的標籤中不能寫 add() ,但是現在用 @Emit 可以了。很高階。
• @Emit

    <button @click="$emit('reduce')">-</button>
    <button @click="handle">-</button>
    <button @click="reduce">-</button>
    <button @click="$emit('add')">+</button>
    <button @click="add">+</button>s

  // 自定義事件(原始的方法)
  handle() {
    this.$emit('reduce')
  }

  @Emit()
  add() {
    console.log('子元件內需要做的事情')
  }
  reduce() {
    console.log('子元件內需要做的事情')
  }

元件內使用 生命週期 計算屬性 computed

• @Component 裝飾器是裝飾 ButtonDemo class 類的
• 但是注意一點，必須是 @Component 裝飾器裝飾了，類內的裝飾器才能被使用。
• @Component 裝飾器 是一個方法
• 作用 1. 可以匯入子元件
• 作用 2. 宣告生命週期
• 作用 3. 設定計算屬性

@Component({
  // 註冊子元件
  components: {
    ButtonDemo
  },
  created() {
    // console.log('vuex-class 拿的資料:',this.StateStr)
    console.log('vuex-class 拿的資料:', this.str)
  },
  // 計算屬性
  computed: {
    Count() {
      return this.count + this.count
    }
  }
})

元件內使用 @Watch

• 測試 @Watch
• @Watch 偵聽器的裝飾器

  @Watch('$route.query.tab', { immediate: true })
  handleTab(newTab: string, oldTab: string) {
    console.log('ButtonDemo', newTab, oldTab)
  }

在元件內獲取 $route

還要看視訊聽老師是怎麼解釋的

1. 直接在事件內訪問 $route 編輯器會報錯
2. 直接在 class 內定義一個公共屬性 $route
3. $route 並不存在在我元件上

text() {
  console.log(this.$route)
}

在元件內獲取 vuex

1. 在元件是可以直接獲取 vuex 資料的

@Component({
  // 元件的生命週期鉤子函式 寫在 @Component 裝飾器內
  created() {
    console.log(this.$store.state.str)
  }
})

2. 元件想要和 vuex 做互動，提倡使用 vuex-class 工具做互動，不直接在 vuex 去獲取一些輔助方法(mapState…)
3. 然後去裝包 執行依賴 vuex-class 或者 npm install --save vuex-class
4. 匯入 import { State } from 'vuex-class' 然後就去使用這個工具包裡面的方法做展示。如果不知道怎麼用就去 npm 官方文件搜尋檢視工具使用。

import { State, Getter, Action, Mutation, namespace } from "vuex-class";
@Component
export class MyComp extends Vue {
  @State("foo") stateFoo;
  @State((state) => state.bar) stateBar;
  @Getter("foo") getterFoo;
  @Action("foo") actionFoo;
  @Mutation("foo") mutationFoo;
  @someModule.Getter("foo") moduleGetterFoo;

  // 如果省略引數，請使用屬性名稱
  // 對於每個狀態/獲取器/操作/變異型別
  @State foo;
  @Getter bar;
  @Action baz;
  @Mutation qux;

  created() {
    this.stateFoo; // -> store.state.foo
    this.stateBar; // -> store.state.bar
    this.getterFoo; // -> store.getters.foo
    this.actionFoo({ value: true }); // -> store.dispatch('foo', { value: true })
    this.mutationFoo({ value: true }); // -> store.commit('foo', { value: true })
    this.moduleGetterFoo; // -> store.getters['path/to/module/foo']
  }
}