vue3+ts笔记

监听vuex的值

如果用另一种格式写，记得一定要return

方法一

<p>监听值取值 <span style="color:red">{{name}}</span></p>
<script setup lang='ts'>
//内置
import { ref, onMounted,watch} from "vue";
//状态vuex
import { useStore } from 'vuex'
const store = useStore()
//响应式数据
const name = ref(store.state.userInfo.name);
//监听
watch(()=>store.state.userInfo.name,(newVal, oldValue)=>{
    name.value =newVal;
})
</script>

方法二

<p>监听值取值 <span style="color:red">{{name}}</span></p>
<script setup lang='ts'>
//内置
import { ref, onMounted,watch} from "vue";
//状态vuex
import { useStore } from 'vuex'
let {state, commit,getters} = useStore();
//使用计算属性动态拿到vuex的值
let name = computed(() => {return state.name})
// let UserInfoNoParams = computed(() => getters['getStateCount'])
console.log(name,state.name,'哎');
//监听数据
 watch(name, (newVal, oldVal) => {
  console.log(name,"改变的值", toRaw(newVal));
  console.log("旧",oldVal);
},{immediate:true,deep: true});
</script>

监听补充

ref 用来声明响应式的基础类型的变量
reactive用来声明响应式的对象类型的变量
watch 引入watch对象，以便调用

	let infoList = reactive([
	      {
	        name:'张三',
	        value: '24'
	      },
	      {
	        name:'李四',
	        value: '25'
	      }
	    ])
  //监听1
	watch(infoList ,(newVal,oldVal)=> {
      console.log(newVal)
    }
    //监听2 watch 加载页面就触发
    watch(infoList ,(newVal,oldVal)=> {
      console.log(newVal)
     },
    {immediate:true})

    return {
		infoList,
	}

Api类型约束

<script setup lang="ts">
import { ref, reactive, computed } from 'vue'
 
type User = { 
  name: string
  age: number
}
 
// ref
const msg1 = ref('')  //  会默认约束成 string 类型，因为ts类型推导
const msg2 = ref<string>('')  //  可以通过范型约束类型
const user1 = ref<User>({ name: 'tang', age: 18 })  //  范型约束
const user2 = ref({} as User)  // 类型断言
 
// reactive
const obj = reactive({})
const user3 = reactive<User>({ name: 'tang', age: 18 })
const user4 = reactive({} as User)
 
// computed
const msg3 = computed(() => msg1.value)
const user5 = computed<User>(() => {
  return { name: 'tang', age: 18 }
})
</script>

defineProps

在 块中是没有组件配置项的，也就是说是没有 props 选项，需要使用 defineProps 来声明 props 相关信息。defineProps 接收的对象和组件选项 props 的值一样。

//1
const props = defineProps({
    options: Object,
})
//2
interface item {
    name: string,
    age: string
}
const props = defineProps({
  taskId: {
    type: String,
    default: '',
  },
  isReject: {
    type: Boolean,
    default: false,
  },
   list?: item[] // ?非必传参数
});
//3
import {  PropType } from "vue";
interface BreadCrumbItemType {
	  name: string;
	  path: string;
}
const props = defineProps({
	  breadCrumbInfo: {
	      type: Array as PropType<BreadCrumbItemType[]>,
	      default: () => []
	    },
	    caseSource: {
	    	type: Array as () => Array<any>,      
	     	default: () => [],
	 },
})

随便记录类型

interface imgItem {
  fileId: string,
  filePath: string,
  ocrText: string,
  fileName: string
}
interface provinceItem {
  areaCode: string,
  areaName: string
}
const state = reactive({
  docList: [] as imgItem[],//文件
  provinceList: [] as provinceItem[],//省份
})