@Component
export default class Test extends Vue {
  name = ''

  @Ref('form') form!:HTMLElement

  mounted(){
    console.log(this.form.offsetHeight)
  }
}

import {
  deleteRefreshToken,
  deleteToken,
  deleteUserInfo,
  getRefreshToken,
  getToken,
  getUserInfo,
  setRefreshToken,
  setToken,
  setUserInfo
} from '@/utils/auth'
import { UserInfo } from '@/types/user'
import router from '@/router'
import { Action, Module, Mutation, MutationAction, VuexModule } from 'vuex-module-decorators'

@Module({
  dynamic: true,//啟用動態模塊,模塊將在調用getModule時注冊
  name: 'User',
  store,//注入store
  namespaced: true,
  stateFactory: true//開啟工廠模式
})
export default class User extends VuexModule {
  token = getToken()
  refreshToken = getRefreshToken()
  userInfo: UserInfo | null = getUserInfo()
  testStr = ''

  @Mutation
  setToken (token: string) {
    this.token = token
    token ? setToken(token) : deleteToken()
  }

  @Mutation
  setRefreshToken (token: string) {
    this.refreshToken = token
    token ? setRefreshToken(token) : deleteRefreshToken()
  }

  @Mutation
  setUserInfo (user: UserInfo | null) {
    this.userInfo = user
    user ? setUserInfo(user) : deleteUserInfo()
  }

  @MutationAction({ mutate: ['testStr'] })
  async setStr () {
    return new Promise<{ testStr: string }>(resolve => {
      resolve({
        testStr: 'test'
      })
    })
  }

  @Action
  async login () {
    this.context.commit('setToken', 'token')
    this.context.commit('setRefreshToken', 'refreshToken')
    this.context.commit('setUserInfo', {})
    router.replace('/')
  }

  @Action
  async loginOut () {
    this.context.commit('setToken', '')
    this.context.commit('setRefreshToken', '')
    this.context.commit('setUserInfo', null)
    router.replace('/login')
  }
}