VUE3 深度解析：Pinia 和 Proxy 的实战指南

前端

2023-11-25 12:58:53

随着 VUE3 的普及，构建响应式且强大的前端应用程序变得更加容易。其中，Pinia 和 Proxy 在管理状态和处理跨域请求方面发挥着至关重要的作用。

Pinia：一个简约强大的状态管理器

Pinia 是一种轻量级状态管理库，它通过提供一个集中式存储库来简化应用程序中的状态管理。它具有以下优势：

响应式状态： Pinia 跟踪应用程序的状态变化，并在状态发生更改时自动更新 UI。
模块化设计： Pinia 允许将状态划分为模块，从而提高可维护性和代码重用性。
可持久化： Pinia 可以持久化状态，即使浏览器刷新后也能恢复状态。

Proxy：跨域请求的桥梁

当应用程序尝试从不同源访问资源时，就会发生跨域请求。Proxy 提供了一种变通方法，允许应用程序绕过这些限制并安全地访问跨域资源。它通过以下方式工作：

中介服务器： Proxy 充当应用程序和跨域资源之间的中介服务器。
转发请求： Proxy 将应用程序的请求转发到跨域资源。
修改响应： Proxy 修改来自跨域资源的响应，使其符合应用程序的同源策略。

在 VUE3 中使用 Pinia 和 Proxy

实践 Pinia

import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({
    name: 'John Doe',
    email: 'john.doe@example.com'
  }),
  getters: {
    fullName: (state) => `${state.name} ${state.email}`
  },
  actions: {
    updateName(newName) {
      this.name = newName
    }
  }
})

实践 Proxy

import axios from 'axios'

const proxy = 'https://cors-anywhere.herokuapp.com/'

const request = axios.create({
  baseURL: proxy,
  headers: {
    'Access-Control-Allow-Origin': '*'
  }
})