vue语法糖

setup语法糖

vue2 router

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
    {
        path: '/',
        name: "main",
        component: () => import('@/views/Main.vue')
    }
]

const router = new VueRouter({
  routes,
})

export default router

vue3 router

import { createRouter, createWebHashHistory } from "vue-router";
//制定路由规则

const routes = [

    {
        path: '/',
        name: "main",
        component: () => import('@/views/Main.vue')
    }

]
const router = createRouter({
    //设置路由的模式
    history: createWebHashHistory(),
    routes
})

export default router

安装pinia 状态管理器

npm i pinia -D

新建文件夹stores 创建index.js

import { defineStore } from 'pinia'
import { ref } from 'vue'

//打包state
function initState() {
    return {
        isCollapse: false
    }
}
export const useAllDataStore = defineStore('allData', () => {
    //ref       类似state属性
    //computed  getters
    //function  actions
    const state = ref(initState())
    return { state }
})

使用

<script setup>

import { useAllDataStore } from "@/stores/index"

const store = useAllDataStore()
const handleCollapse = () => {
    store.state.isCollapse = !store.state.isCollapse;
}

</script>

什么是ref

ref是Vue 3中一个重要的响应式API，用于创建一个包含单个值的响应式引用。 通过.value属性，可以访问和修改这个值，当这个值发生变化时，Vue会自动更新使用该数据的视图

项目制作过程中发现一种el-menu优化的方法不属于本节语法糖知识点 :collapse-transition="false"

  <el-menu :collapse="isCollapse" :collapse-transition="false"></el-menu>

<style lang="less" scoped>

.el-aside {
    transition: width 0.01s;
}

</style>

这样menu伸缩会比较自然