Vue3+Ts笔记：基础系列

最近开始参与一些前端项目，很久没有写过前端了，在此做一些笔记，记录一些简单要点

变量控制页面刷新

在实际开发场景中经常遇到调用其他页面返回后需要刷新原页面的情况，单个页面调用可以使用回调，但是多层调用之后使用回调会很麻烦，所以这里选择使用Pinia，Pinia是Vue的存储库，它允许进行跨组件/页面共享状态
首先定义一个Store

import { defineStore } from "pinia";

export const MyStore = defineStore("My", {
  state: () => ({
    // 是否刷新列表
    isRefresh: false
  }),
  
});

在需要控制刷新的页面引入并使用,然后添加监听，控制刷新方法执行

import { MyStore  } from "@/store/modules/My";
  const myStore = MyStore();
  watch(
    () => myStore.isRefresh,
    (newVal) => {
      if (newVal) {
        onSearch();
        myStore.isRefresh = false;
      }
    }
  );

父组件向子组件传递属性

在子页面定义需要传递的属性

const props = defineProps({
  Id: {
    type: String,
    required: true
  }
});

在父页面当中传递属性，并调用子页面组件

      <div >
        <myCommon ref="MyRef"    :id="id"   />
      </div>