Vuex讲解和使用原理、Pinia 与 Vuex 的主要区别、Pinia优缺点

本文链接：https://blog.csdn.net/qq_43547255/article/details/142379201

一、Vuex讲解和使用原理

什么是 Vuex？
Vuex 是 Vue.js 官方提供的状态管理库，主要用于管理 Vue 应用中多个组件间的共享状态。它提供了一个集中式的存储库（store），可以在应用的不同部分共享和管理状态，适用于复杂的单页应用。
Vuex 的核心概念
Vuex 具有以下核心概念：

2.1 State（状态）
state 是 Vuex 最核心的部分，它存储应用的全局状态。组件可以从 state 中获取数据，Vuex 使得这些状态响应式，组件的 UI 会随着 state 的变化而更新。

const store = new Vuex.Store({
  state: {
    count: 0
  }
});

在组件中访问 state:

<template>
  <p>{{ $store.state.count }}</p>
</template>

2.2 Getters（获取器）
getters 相当于 state 的计算属性，用于从 state 中派生出一些状态，类似于 Vue 组件中的计算属性。它们可以缓存结果，并且只有当依赖的 state 发生变化时才会重新计算。

const store = new Vuex.Store({
  state: {
    count: 0
  },
  getters: {
    doubleCount: state => state.count * 2
  }
});

2.3 Mutations（突变）
mutations 是唯一能够直接修改 state 的方法，Vuex 强制要求使用同步函数来更改状态。每个 mutation 都有一个字符串类型的事件类型（type）和一个回调函数（handler），回调函数的第一个参数是 state。

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  }
});

触发 mutation:

store.commit('increment');

2.4 Actions（动作）
actions 用于提交 mutations，但不同的是，actions 支持异步操作。在 actions 中执行异步操作（如 API 请求）后，再通过 commit 来触发 mutation 以修改状态。

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment');
      }, 1000);
    }
  }
});
<template>
  <button @click="incrementAsync">Async Increment</button>
</template>

<script>
export default {
  methods: {
    incrementAsync() {
      this.$store.dispatch('incrementAsync');
    }
  }
};
</script>

2.5 Modules（模块）
当应用变得复杂时，可以将 store 分成多个模块，每个模块拥有自己的 state、getters、mutations 和 actions，同时它们仍然可以与全局 store 进行交互

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
};

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
};

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
});
this.$store.state.a.someProperty;

Vuex 的工作原理
Vuex 基于以下机制来实现其核心功能：

响应式的 state：Vuex 利用 Vue.js 自身的响应式系统来确保 state 的变化会自动引发界面的更新。

单一状态树：Vuex 通过单一的状态树将所有的状态集中管理，每个组件都可以通过这个状态树访问和修改数据，避免了多层嵌套传递数据的问题。

不可变的 state：只有通过提交 mutation 才能修改 state，这种方式确保了状态的可追踪性。通过 Vue 开发工具，开发者可以轻松地查看每一次 mutation 是如何改变状态的。

Vuex 的应用场景
Vuex 适用于需要共享状态的复杂应用。它最常见的应用场景包括：

用户登录状态管理：比如将用户的登录信息保存在 Vuex 中，应用的不同部分都可以使用该信息。
购物车管理：电商网站中，可以用 Vuex 管理购物车的商品列表。
复杂的表单数据管理：当多个表单步骤共享某些状态时，Vuex 可以集中管理这些数据。
5. 总结
Vuex 是 Vue.js 的官方状态管理工具，它通过集中式的状态存储、响应式的 state、getters、mutations、actions 和模块化的设计，解决了复杂应用中状态共享和管理的问题。虽然 Vuex 提供了很强大的功能，但它也增加了代码的复杂性，因此只在状态管理需求较大的场景中使用 Vuex 会更有效率。

二、Pinia 与 Vuex 的主要区别

简介
Pinia 是 Vue 3 的状态管理库，作为 Vuex 的现代替代方案，提供了更简洁的 API 和更好的 TypeScript 支持。本文将详细讲解 Pinia 的特性、安装方式、模块创建以及在页面中的应用。
主要区别
2.1 API 和语法特性
无 Mutations：在 Pinia 中，状态的修改可以直接在 actions 中进行，而不需要像 Vuex 那样定义 mutations。这减少了代码的复杂性。

更好的模块管理： Pinia 支持直接定义多个 store，每个 store 都可以独立管理状态和行为，避免了 Vuex 中的模块嵌套问题。

TypeScript 支持： Pinia 提供了更好的 TypeScript 类型推导，便于开发者在编写代码时获得更好的代码补全和类型检查。
3. 安装与引入
要在项目中使用 Pinia，首先需要安装：

npm install pinia

在主文件中引入 Pinia

import { createPinia } from 'pinia';
import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);
const pinia = createPinia();
app.use(pinia);
app.mount('#app');

模块创建在 Pinia 中，创建一个 store 也非常简单：

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

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
    name: 'Pinia User'
  }),
  getters: {
    doubleCount: (state) => state.count * 2
  },
  actions: {
    increment() {
      this.count++;
    },
    async fetchNewCount() {
      const newCount = await fetch('/api/new-count').then(res => res.json());
      this.count = newCount;
    }
  }
});

在 Vue 组件中使用 Pinia 的 store 非常简单。通过 useCounterStore 可以访问状态、调用 getters 和 actions。

<template>
  <div>
    <p>Count: {{ counterStore.count }}</p>
    <p>Double Count: {{ counterStore.doubleCount }}</p>
    <button @click="counterStore.increment">Increment</button>
    <button @click="counterStore.fetchNewCount">Fetch New Count</button>
  </div>
</template>

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

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