Vuex和Pinia

最新推荐文章于 2024-08-21 10:01:56 发布

ytfcy_

最新推荐文章于 2024-08-21 10:01:56 发布

阅读量317

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/ytfcy_/article/details/131459798

版权

Vuex

简介

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

Vuex的核心理念就是：一个应用的组件树中的所有组件，共享一个全局的状态。不同于单纯的全局对象的形式，Vuex采用了一种技术，将其存储在一个容器中，并利用Vue的响应式机制，实现了状态的实时更新。

使用场景

在大型应用开发中，尤其是管理比较复杂的数据。例如在交互复杂多样的SPA（单页应用）中，业务逻辑深度嵌套、组件间关系复杂、数据流变化频繁的情况下，使用Vuex可以在管理应用状态方面，给开发者减轻负担。

优点

一致性。对于复杂的应用，Vuex可以帮助我们统一管理应用的状态，让所有组件在读取状态时，都采用统一的方式，从而简化代码开发，提高应用可维护性。
调试方便。由于所有的状态改变都被追踪到了一个容器中，所以易于监控与追踪。
易于理解。使用Vuex的框架和理念都是继承了Flux架构，因此对开发者而言，不需要过多的训练便可以理解状态管理的核心思想。

缺点

使用Vuex有一定的学习成本，不太适合小型应用。
Vuex的使用需要设置比较多的文件与配置，可能造成开发时的繁琐。

示例

Vuex主要有5个组件，包括state、getter、mutation、action和module。

定义state

const state = {
  condition: {
    type: '',
    price: '',
    category: ''
  }
}

定义getter

const getters = {
  getCondition(state) {
    return state.condition
  }
}

定义mutation

const mutations = {
  setCondition(state, payload) {
    state.condition = payload
  }
}

定义action

const actions = {
  updateCondition({ commit }, payload) {
    commit('setCondition', payload)
  }
}

注册模块

new Vuex.Store({
  state,
  getters,
  mutations,
  actions
})

在需要使用条件筛选的组件中，我们可以通过以下方式来读写vuex中的条件：

读取条件

this.$store.getters.getCondition

修改条件

this.$store.dispatch('updateCondition', {type: 'book', price: '10-50', category: 'fiction'})

Pinia

简介

Pinia是Vue.js新一代的状态管理库，可以用来管理Vue 3应用中的数据。它是一个非常轻量级的库，只有3kb的大小，它没有任何依赖，同时与Vue生态系统完美地集成在一起。

使用方法

Pinia的用法非常简单，它提供了如下的API：

defineStore：定义一个store。
createStore：创建一个store实例。
useStore：在组件中使用store实例。

使用场景

Pinia适用于小中型Vue应用，能够有效地简化应用数据状态管理，同时支持异步操作。它可以使代码更加可维护、可扩展，并且更具可读性。Pinia的使用非常灵活，可以轻松地与其他库和插件配合使用。

优点

体积小。Pinia的体积非常小，只有3kb左右。
简单易用。Pinia拥有简单的API，易于开发人员上手。
基于Vue3，并且完美集成于Vue生态系统中。
支持TypeScript，可以提供完整的类型检查功能。
可以轻松地与其他库和插件配合使用。

缺点

Pinia目前相对于Vuex来说还比较新，生态不够完善。
在处理大型应用的多个组件状态时，Pinia会存在不足。

示例

以下是一个简单的示例，我们可以在组件中定义一个计数器的store，并且在组件中使用该store：

定义一个store。

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

在组件中使用store。

import { useCounterStore } from './store'
export default {
  setup() {
    const counter = useCounterStore()
    function handleClick() {
      counter.increment()
      console.log('Current count:', counter.count)
    }
    return { handleClick }
  }
}