vue3 typescript vue-router vuex setup
最近发现vue3相关库都更新的差不多了,尝试学习了新的版本, 使用setup 的确变了很多,像ref 、prop面目全非,刚开始用还找了很久
创建项目
yarn create vite name --template vue-ts
npm install vue-router@4
import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
history: createWebHistory(),
routes: [
{
path: '/',
name: 'home',
component: () => import('../view/file.vue')
},
{
path: '/t',
name: 't',
component: () => import('../view/file.vue')
}
],
})
export default router
yarn add vuex@next --save
import { InjectionKey } from 'vue'
import { createStore, useStore as baseUseStore, Store } from 'vuex'
export interface State {
count: number
}
export const key: InjectionKey<Store<State>> = Symbol()
export const store = createStore<State>({
state: {
count: 0
},
mutations: {
increment(state) {
state.count ++
}
},
actions: {
asd(context) {
context.commit('increment')
}
}
})
export function useStore () {
return baseUseStore(key)
}
main.ts
import {createApp} from 'vue'
import App from './App.vue'
import router from './router'
import {store, key} from './store'
const app = createApp(App)
app.use(router)
app.use(store, key)
app.mount('#app')
使用技巧
let emits = defineEmits<{
(e: 'update:modelValue', v: boolean): void
}>()
let props = defineProps<{
modelValue: boolean
}>()
function setValue(b: boolean) {
emits('update:modelValue', b)
}
import {computed, useSlots, withDefaults} from 'vue'
const slots = useSlots()
const icon = computed(() => {
if (slots.default) return slots.default()[0].children?.trim()
return ''
})
const props = withDefaults(defineProps<{
color?: string
}>(), {
color: ''
})