vue3.0生命周期以及如何使用vue-router、vuex

• vue3.0发布已经有一段时间了，用于生产环境还有点早，但是为了装杯还是要学一下的。继续鼓捣一下vue3.0版本的blog(虽然上一版已烂尾)
• 记录一下vue3中如何使用生命周期函数、vue-router以及vuex（登录后台管理系统，根据是否缓存token判断跳转到登录界面）

1、vue3中使用vuex

<script lang = 'ts'>
import { defineComponent } from 'vue';
import { useStore } from 'vuex'
export default defineComponent ({
    name: 'Home',
    setup(){
         const store = useStore()
         const data: DataProps = {
            token: store.state.token
         }
         return {
              ...data
         }
    }
})
</script>

2、vue3中使用vue-router

<script lang = 'ts'>
import { defineComponent } from 'vue';
import { useRouter } from 'vue-router'
export default defineComponent ({
    name: 'Home',
    setup(){
         //实例化路由
        const router = useRouter()
         // 页面事件函数
        const test = () =>{
            router.push({name: 'Login'})
        }
    }
})
</script>

3、vue3.0中使用生命周期函数

生命周期函数包含：

• 1、beforeCreate -> 使用 setup()

• 2、created -> 使用 setup()

• 3、beforeMount -> onBeforeMount

• 4、mounted -> onMounted

• 5、beforeUpdate -> onBeforeUpdate

• 6、updated -> onUpdated

• 7、beforeDestroy -> onBeforeUnmount

• 8、destroyed -> onUnmounted

• 9、errorCaptured -> onErrorCaptured

生命周期函数必须写在setup(){}方法里面

<script lang="ts">
import { defineComponent,onBeforeMount,onMounted } from 'vue';
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
interface DataProps {
    token: string;
}
export default defineComponent({
  name: 'Home',
  setup(){
      const store = useStore()
      const router = useRouter()
      const data: DataProps = {
          token: store.state.token
      }
      onBeforeMount(()=>{
            if(!store.state.token){
                router.replace({name:'Login'})
            }
      })
      onMounted(()=>{ console.log("Counter ===> 相当于 vue2.x 中 mounted")}) 
      return {
          ...data
      }
  },
  
});
</script>