Vue 状态管理深入研究：Vuex 和 Pinia 的原理与实践对比

多年以后_

于 2024-05-23 15:44:38 发布

阅读量2.1k

点赞数 13

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/liyananweb/article/details/139149812

版权

推荐一个AI网站，免费使用豆包AI模型，快去白嫖👉海鲸AI

👋 引言

在 Vue.js 应用程序中，状态管理是一个至关重要的方面。它有助于集中管理应用的状态，使组件之间的数据共享更加高效和可维护。Vuex 和 Pinia 是两个常用的 Vue 状态管理库，它们都提供了强大的功能来帮助我们更好地管理应用状态。本文将深入剖析 Vuex 和 Pinia，从原理到实践进行全面对比。

📌 Vuex 基础知识

核心构成要素

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

State（状态）：存储应用的状态。
Getter（获取器）：从状态中派生出状态。
Mutation（突变）：同步地更改状态。
Action（动作）：提交 mutation，可以包含异步操作。
Module（模块）：将状态和变更分割成模块。

示例代码

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
   
  state: {
   
    count: 0
  },
  getters: {
   
    doubleCount: state => state.count * 2
  },
  mutations: {
   
    increment (state) {
   
      state.count++;
    }
  },
  actions: {
   
    asyncIncrement ({
     commit }) {
   
      setTimeout(() => {
   
        commit('increment');
      }, 1000);
    }
  }
});

export default store;

// 在组件中使用 Vuex
<template>
  <div>
    <p>{
   {
    count }}</p>
    <p>{
   {
    doubleCount }}</p>
    <button @click="increment">Increment</button>
    <button @click="asyncIncrement">Async Increment