欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-05-17 19:51:05
...
  • 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>
相关标签: vue3 vue