从新回归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>