vue+vite+pinia+ts で発生する問題

1. エレメントプラスを自動導入

vite.config.ts ファイルで、公式 Web サイトのセクションを
参照し、自動的にインポートします。

import {
    
     defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import {
    
     resolve } from "path"; // 编辑器提示path模块找不到。下载 yarn add @types/node --dev 就可

//element-plus自动导入
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import {
    
     ElementPlusResolver } from "unplugin-vue-components/resolvers";

// https://vitejs.dev/config/
export default defineConfig({
    
    
  plugins: [
    // 自动导入element相关函数，如：ElMessage, ElMessageBox..
    AutoImport({
    
    
      resolvers: [ElementPlusResolver()],
    }),
    Components({
    
    
      resolvers: [ElementPlusResolver()],
    }),
    vue()
  ],
  resolve: {
    
    
    alias: {
    
    
      "@": resolve(__dirname, "src"), // 配置别名：将 @ 指向'src'目录
    },
  },
  server: {
    
    
    host: "0.0.0.0", //解决vite use --host to expose  不配置启动时network地址就显示前面的
    port: 3000, //端口号
    open: true, //启动自动打开浏览器
  },
  css: {
    
    
    preprocessorOptions: {
    
    
      scss: {
    
    
        additionalData: "@import '@/styles/constant.scss';", //记得写分号
      },
    },
  },
});

2. vue に ElMessage を自動導入して赤くマークします
ここに画像の説明を挿入します
が、手動で導入する場合は CSS も導入しないとスタイルに問題が発生します。

import {
    
     ElMessage } from 'element-plus'
import 'element-plus/es/components/mesage/style/css'

js-cookie の導入部分は常に赤色でマークされます

tsconfig.jsonに追加

 "noImplicitAny": false,
 "allowSyntheticDefaultImports":true,//允许从没有默认导出的模块引入

VUE3+vite グローバル環境変数

ファイル設定用グローバル変数.env.developmentと同様①viteを使用して読み込むただし、VITE_+変数名は必要な場合のみ認識できる使用する箇所.env.production

import.meta.env.VITE_API_URL

② vite.config.ts は
vite.config.ts で設定されますが、柔軟性に欠けるデメリットがあるため、①を使用することをお勧めします
ここに画像の説明を挿入します

必要な場所に

process.env.VITE_API_URL

エラーが必要です

vite で require を直接使用してエラーを報告し、解決します:
use の場所に以下を導入しますrequire

const require = (imgPath: string) => {
    
    
  try {
    
    
    const handlePath = imgPath.replace("@", "..");
    // https://vitejs.cn/guide/assets.html#the-public-directory
    return new URL(handlePath, import.meta.url).href;
  } catch (error) {
    
    
    console.warn(error);
  }
};

export default require;

vue3 プログラムによるルーティングナビゲーション

vue3にはこれがないのでルーターを直接取得することはできません

import {
    
     useRouter } from "vue-router";
const router = useRouter();//获取实例

router.push({
    
     name: item.label });

ピニアの使用

store/index.ts

import {
    
     createPinia } from "pinia";

const pinia = createPinia();

export default pinia;

で導入されmina.ts、使用されます

import {
    
     createApp } from "vue";
import "@/styles/index.scss";
// 放公共的css代码，引入main.ts就可以在每个页面都用了
import "./style.css";

import router from "./router";
import App from "./App.vue";

//使用pinia
import pinia from "./store/index";

createApp(App).use(router).use(pinia).mount("#app");

その後、個別のモジュールを作成できます。各モジュールは 1 つのファイルに分割されます。
返回的函数统一使用useXXX作为命名方案，这是约定的规矩

import {
    
     defineStore } from "pinia";

const userInfo = defineStore('user',{
    
    

})

export default userInfo;

使用：

応答性を維持し、値を直接分解して割り当てることができないようにするには、計算された値を使用します。

 const currentPathName = computed(() => {
    
    
    return currentPath.label;
 });

または使用しますstoreToRefs

import {
    
     storeToRefs } from "pinia";
const {
    
     currentPath } = storeToRefs(useUser);

永続化:プラグインアドインを
インストールしますpinia-plugin-persistedstate
store/indes.ts

import {
    
     createPinia } from "pinia";
import piniaPluginPersistedstate from "pinia-plugin-persistedstate";

const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);//持久化

export default pinia;

永続化する必要があるストアに追加します。
1. persist:true: 次に有効にします
。 2. オブジェクトの使用方法

persist: {
    
    
    // 修改存储中使用的键名称，默认为当前 Store的 id
    key: "storekey",
    storage: window.sessionStorage, // 修改为 sessionStorage，默认为 localStorage
    paths: ["currentPath", "userBaseInfo"], // state 中的字段名，按组打包储存
  },

全体

import {
    
     defineStore } from "pinia";
import {
    
     menuItem } from "../../types/menu";
interface menu {
    
    
  userBaseInfo: object;
  currentPath: menuItem;
}

//返回的函数统一使用useXXX作为命名方案，这是约定的规矩
const useUserInfo = defineStore("user", {
    
    
  // 开启数据持久化
  persist: {
    
    
    // 修改存储中使用的键名称，默认为当前 Store的 id
    key: "storekey",
    storage: window.sessionStorage, // 修改为 sessionStorage，默认为 localStorage
    paths: ["currentPath", "userBaseInfo"], // state 中的字段名，按组打包储存
  },
  // persist: true,
  state: (): menu => ({
    
    
    userBaseInfo: {
    
    },
    currentPath: {
    
    
      path: "",
      label: "",
      key: "",
      icon: "",
    },
  }),
  actions: {
    
    
    //设置currentPath
    set_currentPath(item: menuItem) {
    
    
      this.currentPath = item;
    },
  },
});
export default useUserInfo;

ルーターの変更を監視する

watch(
    () => router.currentRoute.value,
    (newValue: any) => {
    
    
        console.log("newValue", newValue);
        }
    },
    {
    
     immediate: true }
);

watch には 2 つのパラメータがあり、1 つ目は監視する値、2 つ目はコールバック関数です。

watch(WatcherSource, Callback, [WatchOptions])
参数：
WatcherSource：想要监听的响应式数据。
Callback：执行的回调函数，入参（newValue,oldValue）。
[WatchOptions]：deep、immediate、flush可选。

deep:当需要对对象等引用类型数据进行深度监听时，设置deep: true,默认值是false。
immediate：默认情况下watch是惰性的，设置immediate: true时，watch会在初始化时立即执行回调函数一次。
flush：控制回调函数的执行时机，。它可设置为 pre、post 或 sync。
	pre：默认值，当监听的值发生变更时，优先执行回调函数（在dom更新之前执行）。
	post：dom更新渲染完毕后，执行回调函数。
	sync:一旦监听的值发生了变化，同步执行回调函数（建议少用）。

複数の値をリッスンする
リアクティブオブジェクト内の値をリッスンする場合は、次を使用します () => data.selectTemp

//有一个值发生了变更，则会触发watch，如果两个值同时发生变更，同样只是触发一次watch的回调函数。
watch([finalText, () => data.selectTemp], (newValue, oldValue) => {
    
    
});

詳細な監視が必要なのは、参照データ型そのものであり、その属性ではありません。さらに、新しい値のみを取得できますが、古い値は取得できません。

watchEffect watchEffect の使用は
、副作用関数であるフレームリスナーでもあります。
参照データ型のすべてのプロパティをリッスンします。特定のプロパティに固有である必要はありません。実行されるとすぐにリッスンし、コンポーネントがアンインストールされるとリッスンを停止します。

  const stop = watchEffect(() => {
      console.log('name:',obj.name)
    })
    const stopWatchEffect = () => {
      console.log('停止监听')
      stop();
    }