- 路由配置
vue3.0使用createRouter來創(chuàng)建Vue Router實例
之前用構(gòu)造函數(shù)的方式
createRouter, createWebHashHistory
const router = createRouter({
history: createWebHashHistory(),
[
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: () => import('../views/About.vue')
}
]
})
export default router
- 初始化狀態(tài)
vue3.0通過setup方法初始化狀態(tài)
調(diào)用ref()方法返回一個響應(yīng)式的對象
在setup中對ref返回的數(shù)值進行操作時蔗候，需要通過.value來獲取
// value1只有一個value屬性
setup() {
let value1 = ref('disk')
let ienter = () => {
console.log(value.value);
}
let addValue1 = () => {
value1.value ++
}
return {
value, ienter,addValue1
}
}
- 計算屬性computed方法和監(jiān)聽器watch方法
watch方法包含兩個參數(shù)，兩個參數(shù)都是function
import { ref, toRefs, computed, watch } from 'vue'
setup() {
let value1 = ref('disk')
let ienter = () => {
console.log(value.value);
}
let addValue1 = () => {
value1.value ++
}
let douValue1 = computed(() => value1.value * 2)
watch(() => value1.value, val=>{
console.log(val)
})
return {
value, ienter,addValue1, douValue1
}
}
- 獲取路由
vue3.0通過getCurrentInstance方法獲取當前組件的實例
通過getCurrentInstance方法的ctx屬性獲得當前上下文
通過計算computed獲取store.state.name的值
import { ref, toRefs, computed, watch, getCurrentInstance } from 'vue'
setup() {
let value1 = ref('disk')
let ienter = () => {
console.log(value.value);
}
let addValue1 = () => {
value1.value ++
}
let douValue1 = computed(() => value1.value * 2)
watch(() => value1.value, val=>{
console.log(val)
})
const { ctx } = getCurrentInstance()
// 當前路由信息
// ctx.$router.currentRoute.value
return {
value, ienter,addValue1, douValue1
}
}
- Vuex使用
import Vuex from 'vuex'
export default Vuex.createStore({
state: {
name: 'licky'
},
mutations: {
setName(state, payload) {
state.test.a = payload
}
},
actions: {
},
modules: {
}
})
setup() {
let value1 = ref('disk')
let ienter = () => {
console.log(value.value);
}
let addValue1 = () => {
value1.value ++
}
let douValue1 = computed(() => value1.value * 2)
watch(() => value1.value, val=>{
console.log(val)
})
const { ctx } = getCurrentInstance()
// 當前路由信息
// ctx.$router.currentRoute.value
let name = computed(() => ctx.$store.state.name)
let editName = () => {
ctx.$store.commit('setName', 'new Name zzz')
}
return {
value, ienter,addValue1, douValue1, name, editName
}
}
