1. 如何在vue中集成ts
vue-cli 創建專案時選擇ts依賴
- yarn add typescript 進行安裝
vite 安裝ts
-
vite—>vue/vue-ts
-
就可以直接寫ts代碼了
可以學習下typescript—》點擊藍色字體跟我一起快速入門ts哦
學了typescript之后再用ts的寫法來寫vue組件代碼
2. composition API 中 使用vue-router
由于在setup中不能使用this, 因為setup在初始化之前執行的，所以setup無法訪問this
setup是一個獨立的鉤子函式，不會依賴vue實體組件，如果用到外部函式，都需要從外部獲取
不能再直接訪問 this.
r
o
u
t
e
r
或
t
h
i
s
.
router 或 this.
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
}
},
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/298384.html
標籤：其他
上一篇：用js實作一個炫酷的煙花效果