npm init vue@3

//或者用Awesome Starter的脚手架创建模版项目  
npm create preset  
```  

<br>
<br>
<br>
<br>
<br>
  
# 三、setup  
setup在props解析之后，创建组件之前执行。  
是组合式API的入口，业务代码可以直接放在里面。  

**使用setup的时候，无法使用this来获取Vue实例。**  
```typescript
<template>
  <p class="msg">{{ msg }}</p>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  const msg = 'Hello World!'
  //context暴露三个属性，attrs、slots、emit
  setup(props, context) {
    // 业务代码写这里...
    onBeforeMount(() => {
      //一些声明周期触发
    })

    return {
      // 需要给 template 用的数据、函数放这里 return
      // 只在函数中调用，不需要rerurn
      msg,
    }
  },
})
</script>

<style scoped>
.msg {
  font-size: 14px;
}
</style>

## 使用 :style 动态修改内联样式  
```html
<template>
  <p
    :style="[style1, style2]"
  >
    Hello World!
  </p>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  setup () {
    const style1 = {
      fontSize: '13px',
      'line-height': 2,
    }
    const style2 = {
      color: '#ff0000',
      textAlign: 'center',
    }

    return {
      style1,
      style2,
    }
  }
})
</script>

  
单独的路由跳转守卫，在跳转之前  

  
<br>
<br>
<br>
<br>
<br>

# 十、组件通信  
## 1、通过Props  
```html
<template>
  <Child
    title="用户信息"
    :index="1"
    :uid="userInfo.id"
    :user-name="userInfo.name"
  />
</template>
```  
接收  
```typescript
export default defineComponent({
  props: {
    title: {
      type: String,
      required: true,
      default: '默认标题'
    },
    index: Number,
    userName: String,
    //两种类型之一
    uid: 【Number,String]
  }
})
```  
  
## 2、通过emits  
```html
<template>
  <Child
    @update-age="updateAge"
  />
</template>
<script>
  import { defineComponent, reactive } from 'vue'
import Child from '@cp/Child.vue'

interface Member {
  id: number,
  name: string,
  age: number
};

export default defineComponent({
  components: {
    Child
  },
  setup () {
    const userInfo: Member = reactive({
      id: 1,
      name: 'Petter',
      age: 0
    })

    // 定义一个更新年龄的方法
    const updateAge = (age: number): void => {
      userInfo.age = age;
    }

    return {
      userInfo,

      // return给template用
      updateAge
    }
  }
})
</script>
```  
子元素调用    
```typescript
export default defineComponent({
  emits: [
    'update-age'
  ],
  setup (props, { emit }) {
    
    // 2s 后更新年龄
    setTimeout( () => {
      emit('update-age', 22);
    }, 2000);

  }
})
```  
  
## 3、eventbus  
```shell
npm install --save mitt 
``` 
在libs文件夹下建立bus.ts  
```typescript
import mitt from 'mitt';
export default mitt();
```  
启用接收eventbus  
```typescript
import { defineComponent, onBeforeUnmount } from 'vue'
import bus from '@libs/bus'

export default defineComponent({
  setup () {
    // 定义一个打招呼的方法
    const sayHi = (msg: string = 'Hello World!'): void => {
      console.log(msg);
    }

    // 启用监听
    bus.on('sayHi', sayHi);

    // 在组件卸载之前移除监听
    onBeforeUnmount( () => {
      bus.off('sayHi', sayHi);
    })
  }
})
```  
发送eventbus  
```typescript
import { defineComponent } from 'vue'
import bus from '@libs/bus'

export default defineComponent({
  setup () {
    // 调用打招呼事件，传入消息内容
    bus.emit('sayHi', '哈哈哈哈哈哈哈哈哈哈哈哈哈哈');
  }
})
```  
<br>
<br>
<br>
<br>
<br>  
  
# 十一、Vuex  
src/store/index  

```typescript
import { createStore } from 'vuex'

export default createStore({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})
```  
  
<br>
<br>
<br>
<br>
<br>  
  
# 十一、Pinia  
```shell
npm install pinia
```  
**scr/main.ts**中  
```typescript
import { createApp } from 'vue'
import { createPinia } from 'pinia' // 导入 Pinia
import App from '@/App.vue'
createApp(App)
  .use(createPinia()) // 启用 Pinia
  .mount('#app')
```  
  
**Pinia的核心也是store**   
基本定义：  
```typescript
// src/stores/index.ts
import { defineStore } from 'pinia'
//如果有多个store，可以分模块管理。useMessageStore、useUserStore等
export const useStore = defineStore('main', {
  state: () => {
    return {
      message: 'Hello World',
      //通过as指定类型。等同<string[]>[]
      randomMessages: [] as string[],
    }
  },

  actions: {

    // 异步更新 message
    //调用store.updateMessage('New message by async.').then((res){})
    async updateMessage(newMessage: string): Promise<string> {
      return new Promise((resolve) => {
        setTimeout(() => {
          // 这里的 this 是当前的 Store 实例
          this.message = newMessage
          resolve('Async done.')
        }, 3000)
      })
    },
    // 同步更新 message
    updateMessageSync(newMessage: string): string {
      // 这里的 this 是当前的 Store 实例
      this.message = newMessage
      return 'Sync done.'
    },
  },

  // 定义一个 fullMessage 的计算数据
  getters: {
    fullMessage: (state) => `The message is "${state.message}".`,
     // 这个 getter 返回了另外一个 getter 的结果
    emojiMessage(): string {
      return `🎉🎉🎉 ${this.fullMessage}`
    },
    // 定义一个接收入参的函数作为返回值。这种get没有相应性
    //调用const signedMessage = store.signedMessage('Petter')
    signedMessage: (state) => {
      return (name: string) => `${name} say: "The message is ${state.message}".`
    },
  },
})
```   
基本使用：  
```typescript
import { defineComponent } from 'vue'
import { useStore } from '@/stores'

export default defineComponent({
  setup() {
    // 像 useRouter 那样定义一个变量拿到实例
    const store = useStore()

    // 通过计算拿到里面的数据
    // 直接通过 message.value = 'New Message.';就可以更新
   const message = computed({
      // getter 还是返回数据的值
      get: () => store.message,
      // 配置 setter 来定义赋值后的行为
      set(newVal) {
        store.message = newVal
      },
    })

    // 传给 template 使用
    return {
      message,
    }
  },
})
```  
<br>  
<br>  
  
也提供```storeToRefs```把state 的数据转换为 ref 变量。  
它会忽略掉 Store 上面的方法和非响应性的数据，只返回 state 上的响应性数据。  
```typescript
import { defineComponent } from 'vue'
import { useStore } from '@/stores'

// 记得导入这个 API
import { storeToRefs } from 'pinia'

export default defineComponent({
  setup() {
    const store = useStore()

    // 通过 storeToRefs 来拿到响应性的 message
    const { message } = storeToRefs(store)
    //const { message } = toRefs(store) //跟 storeToRefs 操作都一样，只不过用 Vue 的这个 API 来处理



    console.log('message', message.value)

    //要用时直接赋值即可
    //message.value = 'New Message.'

    return {
      message,
    }
  },
})

### 2、每个store文件中，导出use方法。  
```typescript
//每个store的id必须唯一
export const useUserStore = defineStore('user', {
})
```  
### 3、在index.ts里统一输出。  
```typescript
export * from './user'
export * from './game'
export * from './news'
```  
### 4、使用时只需要从stores导入。  
```typescript
import { useUserStore, useGameStore } from '@/stores'
export default defineComponent({
  setup() {
    // 先从 userStore 获取用户信息（已经登录过，所以可以直接拿到）
    const userStore = useUserStore()
    const { userId, userName } = storeToRefs(userStore)

    // 使用 gameStore 里的方法，传入用户 ID 去查询用户的游戏列表
    const gameStore = useGameStore()
    const gameList = ref<GameItem[]>([])
    onMounted(async () => {
      gameList.value = await gameStore.queryGameList(userId.value)
    })

    return {
      userId,
      userName,
      gameList,
    }
  },
})
```  
<br>  
<br>
<br>  

## store之间相互调用  
```typescript
import { defineStore } from 'pinia'

// 导入用户信息的 Store 并启用它
import { useUserStore } from './user'
const userStore = useUserStore()

export const useMessageStore = defineStore('message', {
  state: () => ({
    message: 'Hello World',
  }),
  getters: {
    // 这里我们就可以直接引用 userStore 上面的数据了
    greeting: () => `Welcome, ${userStore.userName}!`,
  },
})
```    

<br>  
<br>
<br> 
<br> 
<br> 
  
# 十二、补遗  
  
使用了script-setup
```typescript
<!-- 使用 script-setup 格式 -->
<template>
  <Child />
</template>

<script setup lang="ts">
//无需再defineComponent和return，
import Child from '@cp/Child.vue'

defineProps({
  name: {
    type: String,
    required: false,
    default: 'Petter'
  },
  userInfo: Object,
  tags: Array
});

const msg: string = 'Hello World!';  

// 获取 emit
const emit = defineEmits(['chang-name']);

// 调用 emit
emit('chang-name', 'Tom');

const post = await fetch(`/api/post/1`).then((r) => r.json())
</script>