从新回归Vue之3.0（四）：动态组件，vuex

一，component动态组件

由于组件被引用为变量而不是作为字符串键来注册的，在 <script setup> 中要使用动态组件的时候，就应该使用动态的 :is 来绑定：

<script setup lang='ts'>
import Foo from './Foo.vue'
import Bar from './Bar.vue'
</script>
 
<template>
  <component :is="Foo" />
  <component :is="someCondition ? Foo : Bar" />
</template>

二，ts限制普通函数/箭头函数参数类型

<script setup lang="ts">
function test(params:(string|boolean)):void {
console.log(params);
}
test('5555')
</script>

<script setup lang="ts">
const test = (params:(string|boolean))=>{
console.log(params)
}
test('5555')
</script>

三，引入vuex配置和使用

npm install vuex@next --save

main.ts

import { createApp } from 'vue'
import App from './App.vue'
// 导入store模块, 传入 injection key
import store from './store';
 
const app = createApp(App)
app.use(store)
app.mount('#app')

store文件夹下index.ts

// 引入
import { createStore } from "vuex";
 
export default createStore({
  // 声明变量
  state: {
    "name": 'xxxxx'
  },
  // 修改变量（state不能直接赋值修改，只能通过mutations）
  mutations: {
    setName(state, newValue){
      state.name = newValue
    }
  },
  actions: {},
  modules: {},
});

vuex.vue测试文件

<template>
  <button @click="changeName" size="small">点击修改名称</button>
</template>
 
<script setup lang="ts">
import { ref, reactive, watch, onMounted, computed } from "vue";
import { useStore } from 'vuex'
// data
const store = useStore()
let name = computed(()=>{ return store.state.name });
// props
// emit
// methods
function changeName():void{
    store.commit('setName', '哈哈哈')
    console.log('修改后的名称：'+name.value);
}
//watch
// defineExpose
// 生命周期
onMounted(() => {
  console.log(name.value)
});
 
</script>