DATE: August 11, 2024

Pinia 状态管理库

Pinia 是一个轻量级的、符合 Vue 3 Composition API 设计理念的 Vue.js 状态管理库。它被设计为 Vuex 的替代品，提供了一个更简单、更直观的方式来在 Vue 应用中共享和管理状态。以下是关于 Pinia store 的一些关键概念和用法：

  • Store：在 Pinia 中，store 是一个包含状态、getter 和动作的实体。它可以被看作是全局状态的一个容器，你可以在应用的任何组件中访问和修改这个状态。
  • State：状态是 store 中保存的数据，可以是响应式的或非响应式的。
  • Getters：类似于 Vuex 中的计算属性，getters 是基于 store 的状态派生出来的值，它们有缓存的特性。
  • Actions：动作是用来修改 store 中的状态的函数，它们可以包含异步操作。

storeToRefs()函数

在 Vue 3 中，从响应式对象中解构属性时，通常会导致这些属性失去响应性。这是因为解构操作实际上只是复制了属性的当前值，并没有保留响应式连接。为了在使用Pinia store时能够保持状态的响应性，就需要使用storeToRefs()。

storeToRefs()函数接收一个Pinia store实例作为参数，并且返回一个对象，该对象的每个属性都是一个ref。ref是 Vue 3 的响应式系统中的一个概念，它包裹了一个响应式的值。当解构这个返回的对象时，每个属性都会保持其响应性。

Vue中的路由

Vue中的路由用于在单页面应用（SPA）中根据不同的URL路径展示不同的页面或组件。

路由使用

  1. 安装和配置：在Vue项目中使用vue-router，需要安装并通过main.js文件进行配置。
  2. 定义路由：在router/index.js文件中定义路由，每个路由都映射一个组件。
  3. 路由视图：使用<router-view>标签在Vue组件中展示匹配当前路径的组件。