Vue3.0再不学就out了!跟我入门第一天,含集成ts、router、vuex等使用方法

2,347 阅读1分钟

本文正在参与“程序员必备小知识”创作活动。

1. 如何在vue中集成ts

vue-cli 创建项目时选择ts依赖

  • yarn add typescript 进行安装

vite 安装ts

2. composition API 中 使用vue-router

由于在setup中不能使用this, 因为setup在初始化之前执行的,所以setup无法访问this setup是一个独立的钩子函数,不会依赖vue实例组件,如果用到外部函数,都需要从外部获取 不能再直接访问 this.routerthis.router 或 this.route 作为代替,我们使用useRouter和useRoute函数

  • 2.1创建路由
// 引用两个函数,一个是创建路由对象,一个是路由模式
import {createRouter,createWebHashHistory} from 'vue-router'

// 导出创建路由对象
export default createRouter({
  // 设置路由模式
  history:createWebHashHistory(),
  // 路由信息对象
  routes
})
  • 引用
 import {useRouter,useRoute} from 'vue-router'
  • 2.2 使用
  setup(props) {
    const router = useRouter()   //等同于this.$router
    const route = useRoute()   //等同于this.$router
  }

3. composition API 中 使用vuex

  • vuex也是无法使用this.$store
    • 2.1 引用
 import {useStore} from 'vuex'
  • 2.2 使用
  // 在组合api中是不支持辅助函数
  setup() {
    const store = useStore()
// 创建响应式对象,接受一个普通对象,返回一个响应式数据对象
    const data = reactive({
      iscount:computed(()=> store.state.count*2),
      doubelCount:computed(()=> store.getters.doubel)
    })
    // 上下都可
    // const iscount = computed(()=> store.state.count*2)
    // 提交mutations
    const cAdd=()=>{
      store.commit('add')
    }
    const cAddVal=(val)=>{
      store.commit('addVal',val)
    }
    const asyncAdd = ()=>{
      store.dispatch('asyncAdd')
    }
  return{
        ...toRefs(data),
        cAdd,
        cAddVal,
        asyncAdd
      }
  },

最后

如果对您有帮助,希望能给个👍评论收藏三连!

博主为人老实,无偿解答问题哦❤