vue3 关系请教
发布于 4 年前 作者 clubadmin 1289 次浏览 来自 问答
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

关于 Vue3Class API(虽已知取消掉了) 但是下面的代码是Class API 写法,还是什么别的
想问 Vue3 使用 Typescript 正确 写组件的方式或者范例

<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import { State, Getter, Action, namespace } from 'vuex-class';
import { Tabbar, TabbarItem } from 'vant';
@Component({
  components: {
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem
  }
})
export default class BottomTab extends Vue {
  info: number = 0
  active: string = 'home'
  // watch
  @Watch('goods') 
  onGoodsChange(val: Array<any>, oldVal: Array<any>): any {
    this.info = this.goods.length
  }
  @Watch('curPage')
  onCurPage(val: string, oldVal: string): void {
    this.active = val
  }
  @Watch('active')
  onActiveChange(val: string, oldVal: string): void {
    this.ChangePage(val)
    this.$router.push(this.curPage)
  }
  // vuex数据
  @State(state => state.app.goods) goods: any
  @State(state => state.app.curPage) curPage: any
  @Action('UpdateShop') UpdateShop!: Function
  @Action('ChangePage') ChangePage!: Function
  
  private created() {
    this.info = this.goods.length
  }
  private mounted() {
  }
}
</script>
回到顶部