Vue Class Component

一、vuex定义

import Vue from 'vue'
import Component from 'vue-class-component'
import { mapGetters, mapActions } from 'vuex'

// post接口
import { Post } from './post'
@Component({
  computed: mapGetters([
    'posts'
  ]),
  methods: mapActions([
    'fetchPosts'
  ])
})
export default class Posts extends Vue {
  // 在类属性声明映射的getter和action
  // 你可能需要添加 `!` 在类属性后面
  // 为了避免编译错误（需要明确的赋值断言）.
  
  // 映射getter
  posts!: Post[]
  // 映射action
  fetchPosts!: () => Promise as void

  mounted() {
    // 使用getter和action
    this.fetchPosts().then(() => {
      console.log(this.posts)
    })
  }
}

二、$refs扩展

@Component
export default class InputFocus extends Vue {
  render(){
  	return <input ref="input" />
  }
  // 注意，类型注释（使用冒号:），而不是值赋值（=）
  $refs!: {
    input: HTMLInputElement
  }
  mounted() {
    this.$refs.input.focus()
  }
}