1. Create the store.ts file

import { createPinia } from "pinia";

const store = createPinia();

export { store };

2、 Introduced in main.ts

import { createApp } from "vue";
import "./style.css";
import "./main.css";
import App from "./App.vue";
import ElementPlus from "element-plus";
import Avue from "@smallwei/avue";
import "@smallwei/avue/lib/index.css";
import "@/assets/css/mapbox-gl.css";
import { store } from "@/pinia/index";    // Introduce the created pinia
import router from "@/router/index";
import "element-plus/dist/index.css";

const app = createApp(App);

app.use(router);
app.use(store);  // use pinia
app.use(ElementPlus);
app.use(Avue);
app.mount("#app");

3、 Create your own Pinia file

import { defineStore } from "pinia";

interface State {
  nodeArr: any[] | [];
  stencilLoading: boolean;
  selectNodeId: number;
  lcNodeData: LCDataType | {}
}

const defaultState: State = {
  nodeArr: [], // Node data in the drag and drop bar
  stencilLoading: true, // Loading of the drag bar
  selectNodeId: -1, // The node id of the selected drag bar
  lcNodeData: {}, // The LC data in the selected canvas
};

export const lcDataStore = defineStore("lcData", {
  state: () => {
    return defaultState;
  },
  getters: {},
  actions: {},
});

4、 Using Pinia in the TS file

import { lcDataStore } from "@/pinia/lcAssign";
import { store } from "@/pinia/index";

const lcStore = lcDataStore(store);   // Here you have to pass in the store

// After that, you can use the properties and methods inside the lcStore