mynote/vue/vue3.md

vue3 typescript vue-router vuex setup

最近发现vue3相关库都更新的差不多了，尝试学习了新的版本, 使用setup 的确变了很多，像ref 、prop面目全非，刚开始用还找了很久

创建项目

yarn create vite  name --template vue-ts

vue-router

# 安装
npm install vue-router@4

// vim router/index.ts
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

vuex

# 安装
yarn add vuex@next --save

// store/index.ts
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')
        }
    }
})

// 定义自己的 `useStore` 组合式函数
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')

使用技巧

// prop vue3 v-module 绑定的事件名改了
// setup
let emits = defineEmits<{
  (e: 'update:modelValue', v: boolean): void
}>()
let props = defineProps<{
  modelValue: boolean
}>()

function setValue(b: boolean) {
  emits('update:modelValue', b)
}

// slots 中默认插槽
// props 允许为空的写法, 否则会报错
import {computed, useSlots, withDefaults} from 'vue'
const slots = useSlots()
const icon = computed(() => {
  // @ts-ignore
  if (slots.default) return slots.default()[0].children?.trim()
  return ''
})
const props = withDefaults(defineProps<{
  color?: string
}>(), {
  color: ''
})

// webstorm 识别路径别名@ 
// 在tsconfig.json complierOptions 下添加
"baseUrl": ".",
"paths": {
  "@/*": ["./src/*"]
}

// vite.config.js
resolve: {
    // https://vitejs.dev/config/#resolve-alias
    alias: {
      "@": "/src",
    },
  },