Vue_day2

月亮的梨涡36

已于 2023-04-26 22:05:34 修改

阅读量502

点赞数

文章标签：前端

于 2023-04-26 22:04:01 首次发布

本文链接：https://blog.csdn.net/m0_64425997/article/details/130381825

版权

1.简述 mitt

2. pinia 模块化和与 vuex 中的store的区别

1.简述 mitt

介绍

mitt是一个小型的js库，提供了一个事件总线的功能。

作用

可以在组件之间通信，尤其是父组件和子组件间传递数据。创建事件总线对象来触发和监听事件。

步骤

1.安装mitt库

npm install mitt

2.引入库并创建事件总线对象

import mitt from 'mitt'
const bus = mitt ()

3.在发送方组件中触发事件

bus.emit ('eventName', data)

4.在接收方组件中监听事件

bus.on ('eventName', (data)=>{
//处理数据
})

5.API

// 创建mitt实例
mitt()
// 事件名称到注册处理程序函数的映射。
all
//触发事件，两个参数：name：触发的方法名，data：需要传递的参数
emit(name,data) 
// 绑定事件，两个参数：name：绑定的方法名，callback：触发后执行的回调函数
on(name,callback) 
// 解绑事件，一个参数：name：需要解绑的方法名
off(name)

2. pinia 模块化和与 vuex 中的store的区别

2.1pinia模块化

1.是什么？

指将应用程序的状态拆分为多个独立的模块，用来管理局部或全部的状态，每个模块都可以包含自己的状态、操作和 getters 等内容，从而实现更加灵活和可维护的状态管理。

2.有什么用？

拆分为多个独立的模块，让每个模块只关注自己内部的状态和操作，可以提高代码的可读性和可维护性，避免状态过于庞大和混乱。

3.怎么用？

1）安装 Pinia

npm install pinia

2)创建状态模块

通过 defineStore 方法创建一个 store 实例，并为该实例指定所需的状态、操作和 getters 等内容。

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  actions: {
    increment() {
      this.count++
    },
    decrement() {
      this.count--
    }
  },
  getters: {
    doubleCount() {
      return this.count * 2
    }
  }
})

3)创建 store 实例时，可选择将其导出为一个模块，在其他文件和组件中可以引入并使用。

使用 useStore 函数在组件中获取 store 实例，并用它进行状态管理。

2.2与Vuex中的store的区别

1.基础架构不同

Pinia 是基于 Vue 3 的新特性 Composition API 构建的，而 store 是基于 Vue 2 的 Object.defineProperty 构造函数实现的。

2.模块化支持不同

在 Vuex 中，使用 modules 可以将大型应用程序的状态逻辑分解为更小的模块。而 Pinia 则通过创建多个 stores 实例来实现类似的功能。

3.使用方式不同

在 store 中，我们需要在每个组件中注入 store 对象，并通过该对象获取和操作状态数据。而在 Pinia 中，我们可以通过 useStore() 钩子函数直接在组件中获取和操作状态数据。

4.TypeScript 支持不同

Pinia 将 TypeScript 的支持作为其设计目标之一，并提供了许多类型和装饰器来帮助开发人员更好地使用它。而 store 的 TypeScript 支持较为有限。

总之，虽然 Pinia 和 store 都用于管理全局状态，但它们的实现方式、使用方式和功能特点都有所不同，开发者可以根据实际需求选择适合自己的状态管理库。如果你正在使用 Vue 3，并希望使用 Composition API 来管理状态，那么 Pinia 会是一个不错的选择。

3. request.js

1.是什么？

是一个js库，用来发起HTTP请求，并提供了一些功能。如：请求拦截、响应拦截、请求重试、超时处理等。

2.怎么用？

1）安装 request.js:

npm install request --save

2）在项目中引入 request.js:

import Request from 'request'

3）创建一个 Request 实例并配置选项：

const request=new Request({ 
baseURL:'https://example.com/api',
timeout:10000,
})

4）发起HTTP请求：

使用 request.get 方法来发送GET请求，并通过 params 参数传递查询参数

request.get('/users',{params:{page:1}}).then((response) => {
console.log(response.data)
})

5）处理响应数据：

通过 then 方法来处理请求成功的响应数据，并通过 catch 方法来处理请求失败的错误信息。

request.get('/users',{params:{page:1}}).then((response) => {
console.log(response.data)
}).catch((error) => {
console.error(error)
})

3.优点

能够便捷灵活地发起HTTP请求，且支持拦截器、重试、超时等，提高开发效率和代码质量。

4.Vue中的管理状态store

1.介绍

在 Vue 中，可以通过 Vuex 插件来管理全局的状态，其中包括了 store 的全局状态容器。可以在 store 中定义全局的状态数据并提供一些方法对其进行操作，然后在任意组件中调用这些方法来实现对状态数据的操作。

2.步骤

首先导入Vue 和 Vuex，并通过 Vue.use(Vuex) 安装 Vuex 插件。然后，创建一个名为 store 的 Vuex 实例，并定义state、mutation、action 和 getter 等对象来管理应用的状态逻辑。

3.使用

在 Vue 组件中使用 Vuex 时，我们可以通过 $store.state 访问 state 变量，通过$store.commit() 方法提交 mutation，通过 $store.dispatch() 方法提交 action，通过 $store.getter 访问 getter。

4.作用

将所有状态数据集中到一个全局的 store 对象中，能够方便地统一管理整个应用程序的状态数据，同时也可以避免不同组件之间相互引用带来的问题。