Vue3状态管理——Pinia

Pinia 是一个轻量级的状态管理库,它是 Vue.js 生态系统中的官方推荐替代 Vuex 的工具。Pinia 主要用于 Vue 3+ 中管理应用程序的状态,它比 Vuex 更加现代化、模块化和易于使用。Pinia 的设计理念遵循了 Vue 3 的 Composition API,提供了更加灵活和简洁的 API。

1. Pinia 的安装

要在 Vue 3 项目中使用 Pinia,首先需要安装它:

npm install pinia

2. Pinia 的基本使用

2.1 创建 Pinia 实例

在 Vue 项目中,首先要创建一个 Pinia 实例,并将其挂载到 Vue 应用中。

// main.js 或 main.ts
import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia'

const app = createApp(App)
app.use(createPinia())  // 安装 Pinia 插件
app.mount('#app')
2.2 创建一个 Store

Pinia 通过 defineStore API 来定义状态管理的 store。每个 store 都有一个独立的状态、getter 和 action。

// stores/counter.js
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => {
    return {
      count: 0
    }
  },
  getters: {
    doubleCount: (state) => state.count * 2
  },
  actions: {
    increment() {
      this.count++
    },
    decrement() {
      this.count--
    }
  }
})
2.3 在组件中使用 Store

在 Vue 组件中使用 store,只需通过 useStore 钩子获取相应的 store 实例。

<template>
  <div>
    <p>Count: {{ counter.count }}</p>
    <p>Double Count: {{ counter.doubleCount }}</p>
    <button @click="counter.increment">Increment</button>
    <button @click="counter.decrement">Decrement</button>
  </div>
</template>

<script>
import { useCounterStore } from '@/stores/counter'

export default {
  setup() {
    const counter = useCounterStore()
    return { counter }
  }
}
</script>

3. Pinia 的重要特性

3.1 模块化

Pinia 允许我们将状态管理拆分成多个 store,每个 store 可以包含自己的状态、getter 和 action,这样有助于代码的模块化和可维护性。

3.2 类型支持(TypeScript)

Pinia 对 TypeScript 提供了非常好的支持。你可以通过类型推导来获取 store 的状态、getter 和 action 类型,而不需要手动编写类型定义。

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  getters: {
    doubleCount: (state) => state.count * 2
  },
  actions: {
    increment() {
      this.count++
    }
  }
})
3.3 响应式

Pinia 是基于 Vue 3 的响应式系统构建的,因此它提供了与 Vue 的响应式系统完全一致的行为。状态会自动响应变化,并且会触发组件的更新。

3.4 持久化

Pinia 支持将状态持久化到 localStoragesessionStorage,通过插件机制,可以轻松地实现。

npm install pinia-plugin-persistedstate

main.js 中配置插件:

import { createPinia } from 'pinia'
import piniaPersist from 'pinia-plugin-persistedstate'

const pinia = createPinia()
pinia.use(piniaPersist)
app.use(pinia)

然后在 store 中启用持久化:

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  persist: true
})
3.5 插件机制

Pinia 提供了插件机制,可以轻松地扩展功能。通过 pinia.use(),你可以在应用中全局安装插件,比如持久化、日志等。

4. Pinia 的高级用法

4.1 异步操作

Pinia 允许在 actions 中处理异步操作,例如 API 请求。

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  actions: {
    async fetchCount() {
      const response = await fetch('/api/count')
      const data = await response.json()
      this.count = data.count
    }
  }
})
4.2 Store 的传参

Pinia 支持动态参数传递给 store,例如在创建 store 时,可以传递不同的参数来初始化 store 状态。

export const useUserStore = defineStore('user', {
  state: () => ({
    userName: '',
    userAge: 0
  }),
  actions: {
    setUserData(name, age) {
      this.userName = name
      this.userAge = age
    }
  }
})
4.3 Store 的监听

你可以通过 watch API 来监听 store 中某个状态的变化,或者使用 Pinia 提供的 subscribe 方法来监听状态变动。

import { watch } from 'vue'
import { useCounterStore } from '@/stores/counter'

export default {
  setup() {
    const counter = useCounterStore()
    watch(
      () => counter.count,
      (newCount) => {
        console.log(`Count has changed to: ${newCount}`)
      }
    )
  }
}

5. 总结

Pinia 是一个专为 Vue 3 设计的状态管理工具,提供了简洁的 API 和强大的功能,能够轻松应对复杂的状态管理需求。它不仅支持响应式数据、getter 和 actions,还具备类型支持、插件机制、持久化等功能,使得在 Vue 项目中使用它非常方便。如果你已经在使用 Vue 3,那么 Pinia 是一个非常值得推荐的选择。
在 Pinia 中,使用 defineStore 来定义一个 store,通常是通过传递一个对象的方式。然而,Pinia 还允许你以函数形式定义 store,这种方式更加灵活,可以动态创建 store,特别适合需要传递参数或者具有特定逻辑的场景。

1. 基本概念

defineStore 本质上是一个函数,可以传递两个参数:

  • 第一个参数是 id,它是 store 的唯一标识符。
  • 第二个参数是一个对象,这个对象包含 store 的配置(state, getters, actions 等)。

而如果你想以函数的方式来定义 store,实际上就是将 defineStore 的第二个参数(配置对象)替换为一个函数,这样可以实现动态生成和计算状态。

2. 函数形式的 Pinia Store

函数形式的 Pinia store 主要用于根据某些条件动态创建 store。下面我们通过一些例子来进行详细解释。

2.1 基础示例

在函数形式中,我们传入一个函数,返回一个对象,该对象包含 state, gettersactions。这种方式非常适合基于传递的参数或上下文动态生成 store。

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', () => {
  // state
  const count = ref(0)

  // getters
  const doubleCount = computed(() => count.value * 2)

  // actions
  const increment = () => {
    count.value++
  }

  return {
    count,
    doubleCount,
    increment
  }
})

在这个示例中,useCounterStore 是一个基于函数的 store,它返回了一个包含状态 (count)、计算属性 (doubleCount) 和操作方法 (increment) 的对象。

2.2 动态 Store

函数形式的定义方式可以用于创建具有动态状态的 store。例如,基于传递的参数来初始化状态或行为。

import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', (id) => {
  // 动态初始化用户数据
  const user = ref({ id, name: '', email: '' })

  // 定义获取用户信息的 action
  const fetchUser = async () => {
    const response = await fetch(`/api/users/${id}`)
    user.value = await response.json()
  }

  return {
    user,
    fetchUser
  }
})

在这个示例中,我们定义了一个 useUserStore,并使用了 id 参数来动态创建该 store 的状态。每次调用 useUserStore(id) 时,都会根据传入的 id 创建一个新的 store 实例。这种方式非常适合需要针对不同用户加载不同数据的场景。

2.3 与 Vue 组件结合

在 Vue 组件中使用函数形式的 store,我们依然可以使用 useStore() 方法来获取该 store。

<template>
  <div>
    <p>User ID: {{ userStore.user.id }}</p>
    <p>User Name: {{ userStore.user.name }}</p>
    <button @click="userStore.fetchUser">Fetch User</button>
  </div>
</template>

<script>
import { useUserStore } from '@/stores/user'

export default {
  setup() {
    const userStore = useUserStore(1)  // 传递用户 ID
    return { userStore }
  }
}
</script>

在上面的例子中,我们通过 useUserStore(1) 获取了一个 store 实例,并使用它来展示和更新用户数据。

3. 动态生成 Store 的优势

  1. 基于参数创建 Store:函数形式允许你根据传入的参数动态创建 store,非常适合具有个性化需求的状态管理。例如,针对不同的用户、不同的主题或配置加载不同的状态。

  2. 更加灵活:由于 defineStore 的第二个参数是一个函数,它能够灵活地根据上下文或配置返回不同的 store 配置,使得 store 更具复用性和可配置性。

  3. 减少冗余:可以通过函数内的逻辑来减少重复的代码逻辑,例如根据不同的 id 加载不同的数据,或根据环境变量加载不同的状态。

4. 完整的示例:函数形式的 Pinia Store

假设我们有一个应用需要管理多个用户的状态,每个用户都有不同的配置,我们可以使用函数形式来动态创建每个用户的 store。

import { defineStore } from 'pinia'

// 动态创建每个用户的 store
export const useUserStore = defineStore('user', (userId) => {
  const user = ref({
    id: userId,
    name: '',
    email: ''
  })
  const loading = ref(false)

  // 异步加载用户数据
  const fetchUserData = async () => {
    loading.value = true
    try {
      const response = await fetch(`/api/users/${userId}`)
      const data = await response.json()
      user.value = data
    } catch (error) {
      console.error('Failed to fetch user data', error)
    } finally {
      loading.value = false
    }
  }

  return {
    user,
    loading,
    fetchUserData
  }
})
在 Vue 组件中使用:
<template>
  <div v-if="!userStore.loading">
    <p>Name: {{ userStore.user.name }}</p>
    <p>Email: {{ userStore.user.email }}</p>
    <button @click="userStore.fetchUserData">Fetch User</button>
  </div>
  <div v-else>
    <p>Loading...</p>
  </div>
</template>

<script>
import { useUserStore } from '@/stores/user'

export default {
  setup() {
    // 动态获取不同用户的 store
    const userStore = useUserStore(123)  // 传递特定用户 ID
    userStore.fetchUserData()  // 加载用户数据

    return { userStore }
  }
}
</script>

5. 总结

使用 Pinia 的函数形式来定义 store 是一种非常灵活的方式,它允许你根据传入的参数动态创建 store。这种方法特别适合那些需要动态初始化或具有动态行为的状态管理场景。

  • 优势

    • 动态参数:可以根据不同的参数初始化 store 的状态和行为。
    • 灵活性:通过函数的逻辑可以减少重复代码,使得 store 更加灵活和可配置。
  • 应用场景:动态加载用户数据、根据配置动态创建 store、具有个性化配置的状态管理等。

通过这种方式,你可以极大地提高应用的可扩展性和可维护性。
在 Pinia 中,storeToRefs 是一个非常实用的工具函数,用于将 store 中的响应式状态解构成普通的 ref 对象。它可以帮助你在 Vue 组件中更加方便地使用 Pinia store 的状态,避免直接对 store 对象进行解构而导致响应式失效的问题。

1. 为什么需要 storeToRefs

在 Vue 中,refreactive 是两种不同的响应式对象类型。ref 是基础类型的数据包装器,而 reactive 是对对象进行响应式包装。当我们在 setup() 函数中使用 Pinia store 时,store 的状态是响应式的,可以直接通过 store.state 来访问,但如果你直接解构 store 对象的属性,会丢失其响应式特性。

例如,假设你直接从 Pinia store 中解构数据:

const store = useCounterStore()
const { count } = store  // 直接解构 store 中的响应式数据

这样做的问题是,count 变成了普通的 JavaScript 值,而不是一个响应式的 ref,因此它无法自动触发视图的更新。

为了解决这个问题,Pinia 提供了 storeToRefs,它可以帮助我们将 store 的响应式属性解构为独立的 ref 对象,从而保持响应式。

2. storeToRefs 的使用

storeToRefs 是 Pinia 提供的一个工具函数,用于将 store 中的响应式属性转化为独立的 ref。它可以确保你在解构时仍然保持响应式。

2.1 基本使用:
import { storeToRefs } from 'pinia'
import { useCounterStore } from '@/stores/counter'

export default {
  setup() {
    const counterStore = useCounterStore()

    // 使用 storeToRefs 解构响应式数据
    const { count, doubleCount } = storeToRefs(counterStore)

    return {
      count,
      doubleCount
    }
  }
}

在这个示例中,storeToRefs(counterStore) 会将 counterStore 中的响应式属性(如 countdoubleCount)转换为独立的 ref,然后我们可以在模板中直接使用它们。

2.2 解构带有嵌套状态的 Store:

如果 store 中有嵌套的对象,storeToRefs 仍然可以正确地将每个嵌套的属性转换为 ref,保持响应式。

import { storeToRefs } from 'pinia'
import { useUserStore } from '@/stores/user'

export default {
  setup() {
    const userStore = useUserStore()

    // 假设 userStore 有一个嵌套的 user 对象
    const { user } = storeToRefs(userStore)

    return {
      user
    }
  }
}

假设 userStore 中的 user 是一个嵌套对象,使用 storeToRefs 后,user 依然是响应式的。你可以像访问 ref 一样访问 user 的属性(如 user.name)。

3. 为什么 storeToRefs 很重要?

Pinia 的 store 是响应式的,这意味着它包含的 state 是由 Vue 的响应式系统管理的。当我们解构 store 的属性时,必须保持这些属性的响应性。如果直接解构 store 中的属性,可能会失去响应式的特性,导致视图无法更新。

使用 storeToRefs 解决了这个问题,它会把 store 中的每个响应式属性转换成独立的 ref,使得它们能够保持响应性,从而触发视图的更新。

4. refreactive 的关系

Pinia store 是基于 Vue 3 的响应式系统(reactiveref)构建的。因此,Pinia store 中的 state 是响应式的。storeToRefs 通过将这些响应式对象转为 ref,保证了在 Vue 组件中使用时的响应性。

特性reactiveref
适用类型对象、数组基础数据类型(字符串、数字、布尔值等)
使用场景适用于对象的响应式适用于单一的基本类型数据
自动解包无法自动解包会自动解包,如 myRef.value

当你需要解构 Pinia store 中的对象或数组时,应该使用 storeToRefs 来确保每个属性仍然是响应式的 ref

5. 完整示例

下面是一个完整的示例,展示如何使用 storeToRefs 在 Vue 组件中解构 Pinia store。

定义 Store
// stores/counter.js
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  const doubleCount = computed(() => count.value * 2)

  const increment = () => {
    count.value++
  }

  return {
    count,
    doubleCount,
    increment
  }
})
使用 Store
<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double Count: {{ doubleCount }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { storeToRefs } from 'pinia'
import { useCounterStore } from '@/stores/counter'

export default {
  setup() {
    const counterStore = useCounterStore()

    // 使用 storeToRefs 来解构响应式数据
    const { count, doubleCount } = storeToRefs(counterStore)

    // 提供给模板使用
    return {
      count,
      doubleCount,
      increment: counterStore.increment
    }
  }
}
</script>

6. 总结

  • storeToRefs 是 Pinia 提供的一个工具函数,用于解构 store 中的响应式数据并保持其响应性。
  • 使用 storeToRefs 可以确保在解构 Pinia store 的状态时,仍然保持响应式特性,而不会丢失数据的反应性。
  • 当你在 Vue 组件的 setup 函数中使用 Pinia store 时,记得使用 storeToRefs 来解构响应式的 state,特别是当 store 中有对象或数组时,这能避免直接解构导致响应式丢失的问题。

通过 storeToRefs,你可以更方便地访问 Pinia store 中的响应式状态,并保持 Vue 的响应式系统的正常工作。
在使用 Pinia 作为状态管理工具时,开发者常见的一些问题和疑虑通常涉及以下几个方面。以下是一些常见的 Pinia 使用问题及其简要总结和解答:


1. Pinia 与 Vuex 的区别是什么?

Vuex 是 Vue 2.x 中的官方状态管理库,适用于 Vue 2.x 和 Vue 3.x(通过 Vuex 4.x)。而 Pinia 是 Vue 3+ 官方推荐的状态管理工具,基于 Vue 3 的 Composition API 设计,具有以下优点:

  • 更简洁的 API,支持模块化且更加易用。
  • 完全支持 Vue 3 的响应式系统。
  • 更好的 TypeScript 支持,自动推导类型。
  • 更轻量,默认无插件支持(可以根据需求进行扩展,如持久化、日志等)。

总结:Pinia 是 Vue 3 生态下的新一代状态管理工具,替代 Vuex,具备更现代化的设计和功能。


2. 如何在 Pinia 中使用 TypeScript?

Pinia 对 TypeScript 提供了非常好的支持。在定义 store 时,可以直接利用 TypeScript 推导和类型检查。对于 stategettersactions,Pinia 可以自动推导类型。

import { defineStore } from 'pinia'

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

Pinia 会自动推导 state 的类型为 { count: number }doubleCount 为计算属性,并且 increment 会具有正确的类型。无需手动添加类型声明。


3. 如何跨组件共享状态?

Pinia 的 store 本身就是全局共享的,因此在不同的组件中直接调用同一个 store 实例即可共享状态。例如:

import { useCounterStore } from '@/stores/counter'

export default {
  setup() {
    const counterStore = useCounterStore()
    return { counterStore }
  }
}

所有组件通过 useCounterStore() 获取到的都是同一个 store 实例,因此它们会共享该 store 的状态。


4. 如何持久化 Pinia 状态?

可以通过插件机制持久化 Pinia 的状态,将其保存在 localStoragesessionStorage 中。需要安装 pinia-plugin-persistedstate 插件:

npm install pinia-plugin-persistedstate

然后在 main.js 中进行配置:

import { createPinia } from 'pinia'
import piniaPersist from 'pinia-plugin-persistedstate'

const pinia = createPinia()
pinia.use(piniaPersist)
app.use(pinia)

在 store 中启用持久化:

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  persist: true  // 启用持久化
})

5. 如何处理异步操作(如 API 请求)?

Pinia 允许在 actions 中处理异步操作,类似于 Vuex 的 actions。例如:

export const useUserStore = defineStore('user', {
  state: () => ({
    user: null,
    loading: false
  }),
  actions: {
    async fetchUser(id) {
      this.loading = true
      try {
        const response = await fetch(`/api/users/${id}`)
        const data = await response.json()
        this.user = data
      } catch (error) {
        console.error('Failed to fetch user data', error)
      } finally {
        this.loading = false
      }
    }
  }
})

在组件中调用 fetchUser() 来发起请求并更新状态。


6. 如何在组件中使用 Pinia store?

在 Vue 3 中,使用 Pinia store 时通常通过 useStore() 方法来访问 store 实例。你可以在 setup() 函数中调用它,并通过 storeToRefs 解构 store 中的响应式状态。

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { storeToRefs } from 'pinia'
import { useCounterStore } from '@/stores/counter'

export default {
  setup() {
    const counterStore = useCounterStore()
    const { count } = storeToRefs(counterStore)

    return {
      count,
      increment: counterStore.increment
    }
  }
}
</script>

使用 storeToRefs 确保状态是响应式的。


7. 如何在 Pinia 中处理模块化的 store?

Pinia 支持模块化 store,允许在不同的文件中定义 store。每个 store 都有一个独立的状态、getter 和 action。你可以在不同的组件中导入和使用这些模块化的 store。

// stores/counter.js
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  actions: {
    increment() {
      this.count++
    }
  }
})

// stores/user.js
import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({
    name: 'John Doe'
  })
})

然后在组件中按需导入使用:

import { useCounterStore } from '@/stores/counter'
import { useUserStore } from '@/stores/user'

export default {
  setup() {
    const counterStore = useCounterStore()
    const userStore = useUserStore()

    return { counterStore, userStore }
  }
}

8. 如何在 Pinia store 中使用计算属性(getters)?

Pinia 的计算属性(getters)类似于 Vue 的计算属性,它们用于基于 state 计算出衍生数据。

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  getters: {
    doubleCount: (state) => state.count * 2
  }
})

在组件中可以直接访问 doubleCount,它会随着 count 的变化而自动更新。


9. 如何在 Pinia store 中进行调试?

Pinia 默认并不提供类似 Vuex 的调试工具,但你可以通过浏览器的开发者工具来查看 Pinia store 的状态。如果你需要更强的调试能力,可以使用第三方插件(例如 Vue DevTools)来查看 Pinia store 的状态变化。

npm install @vue/devtools

安装后,可以通过浏览器 DevTools 查看 Pinia store 的状态。


10. 如何优化性能,避免不必要的更新?

  • 懒加载 store:避免在应用初始化时加载所有的 store,只在需要时动态加载。
  • 避免无关的依赖:使用 storeToRefscomputed 来确保只响应和更新组件相关的 state。
  • 避免频繁的状态更新:在大量的状态变化时,避免每次更新都触发视图更新,可以通过合并多个状态变更操作来优化性能。

总结:

Pinia 提供了一种更现代、更灵活的方式来管理 Vue 3 中的状态。它相比 Vuex 更加简洁且易于使用,尤其是在类型支持、响应式管理和模块化等方面。在开发过程中常见的问题大多数可以通过对 API 的理解和正确使用解决。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/942100.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

高阶:基于Python paddleocr库 提取pdf 文档高亮显示的内容

预览 第1步&#xff1a;理解基本结构和导入必要的库 # 1. 首先导入需要的库 import os # 用于处理文件和路径 import cv2 # 用于图像处理 import numpy as np # 用于数值计算 from paddleocr import PaddleOCR # 用于文字识别 from pdf2image import convert_from_path #…

保护模式基本概念

CPU 架构 RISC&#xff08;Reduced Instruction Set Computer&#xff09; 中文即"精简指令集计算机”。RISC构架的指令格式和长度通常是固定的&#xff08;如ARM是32位的指令&#xff09;、且指令和寻址方式少而简单、大多数指令在一个周期内就可以执行完毕 CISC&…

@vue/cli启动异常:ENOENT: no such file or directory, scandir

参考:https://blog.csdn.net/qq_44355188/article/details/122239566 首先异常报错是&#xff1a;ENOENT: no such file or directory, scandir ‘D:\Data\Project\VueProject\hello\node_modulesvue\cli-plugin-eslint\locales’&#xff1b;我的vue/cli版本是 4.5.15 重点是…

全视通物联数据中台解决方案助力智慧医院新时代

全国医院物联网大会系列活动暨【行走的课堂】标杆研学 四川站“医院物联网应用创新经验交流会”&#xff0c;近日在成都召开。珠海全视通信息技术有限公司总经理林三朝以《物联网技术助力医院高质量发展》为题做了精彩演讲。林总就物联网技术如何助力医院高质量发展&#xff0c…

QT程序发布后,mysql在其它电脑设备无法连接数据库

QT程序发布后&#xff0c;mysql在其它电脑设备无法连接数据库 D:\mysql-5.7.24-winx64\lib, mysql-5.7.24-winx64是一个压缩包&#xff0c;用于启动mysql服务&#xff0c;创建数据库 压缩包 解决方法&#xff1a; 拷贝库到exe的相同目录&#xff0c;libmysql.dll,libmysql.li…

vulnhub靶场-matrix-breakout-2-morpheus攻略(截止至获取shell)

扫描出ip为192.168.121.161 访问该ip&#xff0c;发现只是一个静态页面什么也没有 使用dir dirsearch 御剑都只能扫描到/robots.txt /server-status 两个页面&#xff0c;前者提示我们什么也没有&#xff0c;后面两个没有权限访问 扫描端口&#xff0c;存在81端口 访问&#x…

CNN、RNN、LSTM和Transformer之间的区别和联系

文章目录 CNN、RNN、LSTM和Transformer之间的区别和联系前言CNN&#xff08;卷积神经网络&#xff09;RNN&#xff08;循环神经网络&#xff09;LSTM&#xff08;长短期记忆网络&#xff09;Transformer四者之间的联系与区别Yolo算法简介Yolo和CNN的关系YOLO各版本 CNN、RNN、L…

f(f(x))=x^2 -11x+36, 求f(6)的值,

偶然看到的一个题目&#xff0c;一时兴起&#xff0c;做了一下。题目如下 简单粗暴的思路是待定系数法&#xff0c;盲猜f(x)是个2次函数&#xff0c;令f(x)ax^2bxc ,带入原式&#xff0c;发现矛盾&#xff08;计算略&#xff09;就想放弃了。 忽然看到如果带入6 的话&#xf…

微软远程桌面APP怎么用

微软远程桌面&#xff08;Remote Desktop&#xff09;客户端&#xff08;RD Client&#xff09;是一款由微软开发的应用程序&#xff0c;允许用户通过网络连接远程访问和控制另一台计算机。同时&#xff0c;微软远程桌面RD Client支持多种设备和操作系统&#xff0c;包括Window…

美国加州房价数据分析01

1.项目简介 本数据分析项目目的是分析美国加州房价数据&#xff0c;预测房价中值。 环境要求&#xff1a; ancondajupyter notebookpython3.10.10 虚拟环境&#xff1a; pandas 2.1.1 numpy 1.26.1 matplotlib 3.8.0 scikit-learn1.3.1 2. 导入并探索数据集 通用的数据分析…

PPO算法基础(一)

PPO近端策略优化算法 我们今天还是主要来理解PPO算法的数学原理。PPO是一种策略梯度方法&#xff0c;简单的策略梯度对每个样本&#xff08;或者一组样本&#xff09;进行一次梯度更新&#xff0c;对单个样本执行多个梯度步骤会导致一些问题&#xff0c;因为梯度偏差太大&…

LabVIEW软件开发的未来趋势

LabVIEW软件开发的未来趋势可以从以下几个方面来分析&#xff1a; ​ 1. 与AI和机器学习的深度结合 趋势&#xff1a;LabVIEW正在向集成AI和机器学习方向发展&#xff0c;尤其是在数据处理、预测性维护和自动化控制领域。 原因&#xff1a;AI技术的普及使得实验和工业场景中的…

H3C MPLS跨域optionB

实验拓扑 实验需求 如图,VPN1 和 VPN2 分别通过运营商 MPLS VPN 连接各自分支机构按照图示配置 IP 地址,VPN1 和 VPN2 连接同一个 PE 设备的私网 IP 网段存在地址复用,使用多 VRF 技术来防止 IP 冲突AS 100 和 AS 200 内部的公共网络中各自运行 OSPF 使 AS 内各设备的 Loo…

【数据结构练习题】链表与LinkedList

顺序表与链表LinkedList 选择题链表面试题1. 删除链表中等于给定值 val 的所有节点。2. 反转一个单链表。3. 给定一个带有头结点 head 的非空单链表&#xff0c;返回链表的中间结点。如果有两个中间结点&#xff0c;则返回第二个中间结点。4. 输入一个链表&#xff0c;输出该链…

细说STM32F407单片机轮询方式读写SPI FLASH W25Q16BV

目录 一、工程配置 1、时钟、DEBUG 2、GPIO 3、SPI2 4、USART6 5、NVIC 二、软件设计 1、FALSH &#xff08;1&#xff09;w25flash.h &#xff08;2&#xff09; w25flash.c 1&#xff09;W25Q16基本操作指令 2&#xff09;计算地址的辅助功能函数 3&#xff09;器…

框架程序设计-简答以及论述

目录 maven的pom作用&#xff1a; Pointcut("execution(*com.example.dome.*.*(……))") 缓存的作用&#xff0c;redis配置过程 Redis配置过程&#xff1a; SpringBoot缓存配置过程&#xff1a; AOP的五种增强注解&#xff1a; 论述题&#xff1a;包结构作用、…

如何在谷歌浏览器中启用语音搜索

想象一下&#xff0c;你正在拥挤的地铁上&#xff0c;双手都拿着沉重的购物袋&#xff0c;突然你想搜索附近的咖啡馆。此时如果你能通过语音而不是打字来进行搜索&#xff0c;那将多么的便利&#xff01;在谷歌浏览器中&#xff0c;启用语音搜索功能就是这么简单而高效&#xf…

C语言从入门到放弃教程

C语言从入门到放弃 1. 介绍1.1 特点1.2 历史与发展1.3 应用领域 2. 安装2.1 编译器安装2.2 编辑器安装 3. 第一个程序1. 包含头文件2. 主函数定义3. 打印语句4. 返回值 4. 基础语法4.1 注释4.1.1 单行注释4.1.2 多行注释 4.2 关键字4.2.1 C语言标准4.2.2 C89/C90关键字&#xf…

实力认可 | 通付盾入选《ISC.AI 2024创新能力全景图谱》五项领域

近日&#xff0c;ISC.AI 2024创新能力百强&#xff08;以下简称“创新百强”&#xff09;正式发布《ISC.AI 2024创新能力全景图谱》。该全景图谱是由政企、资本、高校、行业力量共同完成了领域划分、综合创新等标准的制定&#xff0c;整合梳理了参评的300余家数字安全厂商、120…

Vue3项目中引入TailwindCSS(图文详情)

Vue3项目中引入TailwindCSS&#xff08;图文详细&#xff09; Tailwind CSS 是一个实用工具优先的 CSS 框架&#xff0c;提供丰富的低级类&#xff08;如 text-center、bg-blue-500&#xff09;&#xff0c;允许开发者通过组合这些类快速构建自定义设计&#xff0c;而无需编写…