vue+前端速通

const promise = new Promise((resolveCBName, rejectCBName) => {
    resolveCB(42);
}).then()

// 模块模式
const foo = (function () {
  const sayName = (name) => {
    console.log(`Hey, my name is ${name}`);
  };
  // 暴露公开的变量或函数
  return {
    callSayName: (name) => sayName(name),
  };
})();

//使用
foo.callSayName('name')

// CommonJS
// 导出一个模块
module.exports = {
  a: 1,
  b: 2,
};
// 或者
exports.a = 1;
exports.b = 2;

// 导入一个模块
const foo = require("./foo.js");

// ES6 Modules

import defaultExport from "module-name";
import { default as alias } from "module-name";

import * as name from "module-name"; //作为命名空间 使用：name.doThings();
import { export1 } from "module-name";
import { export1 as alias1 } from "module-name";
import { export1, export2 } from "module-name";
import { export1, export2 as alias2, /* … */ } from "module-name";


//同时导入default和其他，default必须放在前面
import defaultExport, { export1, /* … */ } from "module-name";  
import defaultExport, * as name from "module-name";
import "module-name"; //作为副作用引入

<TestPage :msg=msg @injectMsg="getChildMsg" ref="testRef"></TestPage>

<ChildPage v-bind:childValName=passedValue></hildPage>

  props: {
    //提前定义接受的变量
    msg: {
      type: String,
      default: 'nihao',
      // required: true
    }
  },

  provide() {
    return {
      pmsg: this.obj
    }
  }

  inject:['pmsg']

<child-component ref="child"></child-component>

this.$refs.child.childData

methods: {
    //发送父亲
    sendParent: function () {
        //定义事件，等待父监听
        this.$emit('injectMsg', this.name);
    }
},

<ChildPage v-on:injectMsg="getChildData"></ChildPage>

methods: {
    //接收孩子，收到孩子返回的信息
    getChildData: function (value) {
        this.msg = value
    }
},

<slot name="s1" v-bind:numlist=numlist></slot>

<SlotContent>
    <template v-slot:s1="slotMsg">
slotContent: {{ slotMsg.numlist }}
    </template>
</SlotContent>

import {createRouter, createWebHashHistory, createWebHistory} from 'vue-router'
//预先导入组件与加载，不是"懒加载"。懒加载在只有使用时才加载，提升性能，是建议的方式。
//...
import Sidebar from "../views/Sidebar.vue";

// 定义一些路由
// 每个路由都需要映射到一个组件。
//router是一个数组格式，里面是路由对象
const routes = [
    {//重定向路由
        path: '/', 
        redirect: '/home'
    },
    {//没什么特别的路由，path指定路径，component指定组件
        path: '/home', 
        component: Home
    },
    {
#1      path: '/user/:id',//动态路由，匹配/user/123 见例1
#2      name: 'user',	//名字，用于跳转时指定名字 见例2
        component: () => import('../views/User.vue'), //懒加载
#3      props: true, //用于绑定path里的参数和组件里的props组件 见例3
        beforeEnter: (to, from, next) => { //每路守卫，根据来源和去向信息进行访问拦截
            // console.log(to, from)
            next()
        }
    },
    {
#4      path: '/user/:id*', //正则匹配，匹配/user?id=1234，query形式，见例4
        component: NotFound
    },
    {
        path: '/:path(.*)*', //正则匹配，()表示path匹配的字符串，括号后表示对整个参数的正则，使用?、+、*
        component: NotFound
    },
    {
        path: '/parent',
        alias: '/father', //别名
        component: Parent,
        children: [ //路由分组，只是路由关系，并不决定组件之间的关系，组件跳转仍需写全路径例如/parent/st1
            {
                path: 'st1', //相当于/parent/st1
                component: ST1
            },
            {
                path: 'st2',
                component: ST2
            }
        ]
    },
    {
        path: '/onshow',
#5      components: {	//components复数，表示同一路径下将要显示多个组件，见例5
            default: OnShow,
            Topbar: Topbar,
            Sidebar: Sidebar
        }
    }
]


// 创建路由实例并传递 routes 配置
const router = createRouter({
    // history函数。createWebHashHistory，createWebHistory
    history: createWebHistory(),
    routes, // 刚才定义的数组
})

//全球守卫
router.beforeEach((to, from, next) => {
    // console.log(to, from)
    next()
})

//导出
export default router;

<router-link to="/user/123">Go to User</router-link>
<router-view></router-view>

this.$route.params.id

<!--使用path后就不能再使用params,因此params必须搭配name,等同于/user/123-->
<router-link :to="{name:'user',params:{id:'123'}}">Go to User</router-link>
<router-view></router-view>

this.$route.params.id

<router-link to="/user/123">Go to User</router-link>
<router-view></router-view>

export default {
    props: ['id']
}

<router-link :to="{path:'/user',query:{id:'123'}}">Go to User</router-link>
<router-view></router-view>

this.$route.query.id

<router-view></router-view>
<router-view name="Topbar"></router-view>
<router-view name="Sidebar"></router-view>

const app = createApp(App)
app.use(router)
app.mount('#app')

// route是当前活跃的路由的对象，router是全局的路由对象
this.$router.push('/parent')
// 等同于
this.$router.push({path:'/parent'})
// 使用name才能带参数，使用path不能带params
this.$router.push({name: 'user', params: {id: 1234}})
// 带query,等同于 /parent/?id=1234, 还可以使用replace替代当前，不会在history里留下记录
this.$router.push({path: '/user', query: {id: 1234}, replace: true})
//前进正数，后退负数
this.$router.go(-1)

import {reactive} from "vue";
import axios from 'axios'

const store = {
    state: reactive({msg: "helloworld"}),
    updateMsg: function () {
        this.state.msg = 'nihao'
    },
    updateFromNet1: function () {
        //原生fetch
        fetch('http://localhost:8080').then((res) => {
            return res.json()
        }).then((res) => {
                this.state.msg = res.name
            }
        )
    },
    updateFromNet2: function () {
        //三方库axios
        axios.get('http://localhost:8080').then((res) => {
            this.state.msg = res.data.name
        })
    }
}

export default store

//store/index.js
import {createStore} from 'vuex'
import axios from 'axios'

import moduleA from './aStore'

export default createStore({
    state: { //单一状态，基本数据
        count: 0,
        fatherName: 'Bob'
    },
    getters: {//相当于computed选项,对state的进一步计算
        getCount(state) {
            return '计数：' + state.count
        },
        //第二个参数代表自身
        getDescripCount(state, getters) {
            return 'Descrip ' + getters.getCount
        }
    },
    mutations: {//使用这个里面的函数改变数据
        //必须通过this.$store.commit('funName', payload)触发
        //首个参数必须是state，第二个是args集成到一个对象
        increment(state, payload) {
            state.count += payload.inc
        },
        changeName(state, payload) {
            state.fatherName = payload.args + ' ' + payload.name
        }
    },
    actions: {//Action 提交的是 mutation，而不是直接变更状态。Action 可以包含任意异步操作。
        //必须通过this.$store.dispatch('funName', args)触发,本质上是对调用mutation的封装
        //类似mutations的state参数, context是当前store对象
        getLastNameAndChange(context, args) {
            fetch('http://localhost:8081')
                .then((res) => {
                    return res.json()
                })
                .then((res) => {
                    //必须使用mutation
                    context.commit('changeName', {name: res.name, args: args})
                })
        },
        getLastName() {
            axios.get('http://localhost:8081').then((res) => {
                console.log(res.data.name)
            })
        }
    },
    modules: {
        moduleA
    }
})

export default {
    state: {//通过$store.state.moduleA.age获取,多加了一个模块名称
        age: 14
    },
    getters: {
        //state: 当前节点的, getters: 当前节点的,
        //rootState: 根节点的, rootGetters: 根节点的
        getAllInfo(state, getters, rootState, rootGetters) {//直接通过$store.getters.getAllInfo,不需要多加
            return state.age.toString() + ' ' + rootState.count + ' ' + rootGetters.getDescripCount
        }
    },
    mutations: {//直接通过$store.commit('updateAge')
        updateAge(state) {
            state.age = 19
        }
    },
    actions: {}//直接通过$store.dispatch('funcName')
}

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

createApp(App).use(store).use(router).mount('#app')

<template>
  <div class="home">
    <div>{{ $store.state.count }}</div>
    <div>{{ count }}</div>
    <div>{{ $store.state.fatherName }}</div>
    <div> {{ $store.getters.getCount }}</div>
    <div> {{ $store.getters.getDescripCount }}</div>
    <div>
       <!--使用dispatch调用action-->
      <button @click="$store.dispatch('getLastNameAndChange', 'John')">change father name</button>
    </div>
    <div>
      <button @click="$store.dispatch('getLastName')">get last name in console</button>
    </div>

    <div>{{ $store.state.moduleA.age }}</div>
    <div>{{ $store.getters.getAllInfo }}</div>
    <div>
       <!--使用commit调用mutation-->
      <button @click="$store.commit('updateAge')">update age</button>
    </div>
  </div>

</template>

<script>
// @ is an alias to /src
import {mapState} from 'vuex'

export default {
  name: 'HomeView',
  computed: {
    // 必须使用computed才能使得vuex的state和getter响应式
    otherFunc: function () {
      return ''
    },
    // //使用mapState 通过别名映射
    // ...mapState({
    //       //count1: state => state.count
    //       count1: 'count'
    //     }),
    //直接使用原来的名字
    ...mapState(['count'])
  }

}
</script>