待定事项之存储数据

#### 部署云服务器


### 部署云服务器完整步骤

1. **连接到云服务器**

   ```bash

   ssh root@<服务器IP>

   ```

2. **创建项目目录结构**

   ```bash

   mkdir -p /var/www/three/study/待办事项

   ```

3. **克隆项目仓库**

   ```bash

   cd /var/www/three

   git clone https://gitee.com/chen-yixin123666abc/study.git

   ```

4. **安装项目依赖**

   ```bash

   cd /var/www/three/study/待办事项

   yarn install

   ```

5. **配置 Vite**

   - 编辑 `vite.config.js` 文件，添加 `allowedHosts` 配置：

     ```javascript

     // vite.config.js

     import { defineConfig } from 'vite';

     import vue from '@vitejs/plugin-vue';

     export default defineConfig({

       plugins: [vue()],

       server: {

         host: '0.0.0.0',

         port: 5173,

         allowedHosts: ['three.cyx123.cn', 'localhost']

       },

     });

     ```

6. **启动开发服务器**

   ```bash

   yarn dev

   ```

7. **配置 Nginx**

   - 创建或编辑 Nginx 配置文件：

     ```bash

        vim /etc/nginx/conf.d/three.cyx123.cn.conf

     ```

   - 添加以下内容：

     ```nginx

     server {

         listen 80;

         server_name three.cyx123.cn;

         location / {

             proxy_pass http://localhost:5173;

             proxy_set_header Host $host;

             proxy_set_header X-Real-IP $remote_addr;

             proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

             proxy_set_header X-Forwarded-Proto $scheme;

         }

     }

     ```

 

#### **1. 本地存储工具函数**

- 使用 `localStorage` 来持久化待办事项数据。通过定义 `readData` 和 `writeData` 函数，可以方便地读取和写入本地存储

```js

// utils/tools.js

const keyword = 'todosList';

export const readData = () => {

    const a = localStorage.getItem(keyword);

    return a ? JSON.parse(a) : [];

};

export const writeData = (a) => {

    localStorage.setItem(keyword, JSON.stringify(a));

};

```

- **`localStorage`**：Web API 提供的本地存储功能，用于存储键值对数据。

- **`getItem` 和 `setItem`**：分别用于读取和写入本地存储中的数据。

- **`JSON.parse` 和 `JSON.stringify`**：用于将字符串转换为 js 对象，以及将 js 对象转换为字符串。

#### **2. Vue 3 生命周期钩子 `onMounted`**

- 使用 `onMounted` 钩子在组件挂载完成后执行初始化操作，从本地存储中读取待办事项数据并初始化 `arr`

```js

import { ref, onMounted, watch } from 'vue';

import { readData, writeData } from './utils/tools';

let arr = ref([]);

onMounted(() => {

    let data = readData();

    arr.value = [...data];  // 初始化 arr

});

```

- **`onMounted`**：Vue 3 的生命周期钩子，用于在组件挂载完成后执行代码。

- **`ref`**：Vue 3 的响应式 API，用于创建响应式引用。

- **`arr.value`**：通过 `.value` 访问 `ref` 的值。

#### **3. Vue 3 响应式数据侦听器 `watch`**

-  使用 `watch` 侦听器监听 `arr` 的变化，并将最新的数据写入本地存储。

```js

watch(arr, (newValue) => {

    writeData(newValue);

}, { deep: true });

```

- **`watch`**：Vue 3 的响应式 API，用于监听响应式数据的变化。

- **`deep: true`**：配置选项，用于深度监听对象的变化。

- **`writeData`**：将数据写入本地存储的函数。