在Vue3 + TS + Vite的项目开发中，数据的加密与安全存储是至关重要的环节，关乎用户信息安全和业务数据的保密性。掌握有效的数据加密与存储方法，不仅能提升应用的安全性，还能增强用户对产品的信任。

数据加密是保护数据在传输和存储过程中不被窃取或篡改的重要手段。在Vue3项目里，我们可以借助一些成熟的加密库，如CryptoJS。通过npm install crypto - js将其安装到项目中。引入该库后，就可以进行加密操作。例如，对于用户登录的密码数据，在发送到后端服务器之前进行加密：

import CryptoJS from 'crypto - js';

const encryptData = (data: string) => {
    const key = CryptoJS.enc.Utf8.parse('your - secret - key');
    const iv = CryptoJS.enc.Utf8.parse('your - iv - value');
    const encrypted = CryptoJS.AES.encrypt(data, key, {
        iv: iv,
        mode: CryptoJS.mode.CBC,
        padding: CryptoJS.pad.Pkcs7
    });
    return encrypted.toString();
};

在这个示例中，我们使用AES加密算法，设置了密钥和初始向量，对数据进行加密后返回加密字符串。

数据存储方面，Vue3应用常涉及到本地数据存储。对于一些非敏感信息，我们可以使用浏览器提供的localStorage或sessionStorage。但要注意，它们存储的数据是以字符串形式存在的。为了更好地管理数据，我们可以封装一些工具函数：

const setLocalStorage = (key: string, value: any) => {
    localStorage.setItem(key, JSON.stringify(value));
};

const getLocalStorage = (key: string) => {
    const value = localStorage.getItem(key);
    return value? JSON.parse(value) : null;
};

对于敏感数据，如用户登录后的令牌（token），我们可以使用加密存储的方式。先对token进行加密，再存储到本地存储中。在需要使用时，取出并解密。

通过这些数据加密与存储方法，我们在Vue3 + TS + Vite开发中能够有效保障数据的安全性。合理运用加密库和存储策略，不仅可以满足项目的安全需求，还能提升应用的整体质量，为用户提供更可靠的服务。不断探索和实践这些技巧，将有助于打造更安全、更优质的前端应用程序。