Vuex 和 Pinia 的介绍及使用

Vuex 和 Pinia 都是用于 Vue.js 的状态管理库，它们可以帮助你更好地管理和组织在 Vue 应用中使用的共享状态。下面我们将分别介绍 Vuex 和 Pinia 的用途，以及为什么 Vue 3 开始推荐使用 Pinia，再介绍 Pinia 的一些常见写法，包括在 setup 函数中的使用方法。

Vuex

Vuex 是 Vue.js 的状态管理库，它提供了一种集中式存储来管理所有组件的状态，并且以一种可预测的方式更新状态。

主要特点：

1. 状态存储: Vuex 允许你将应用的状态存储在一个集中的地方。
2. 状态可预测: 通过限制更新状态的方式，Vuex 确保状态的变化是可预测的。

Pinia

Pinia 是一个新的状态管理库，是 Vuex 的一个轻量级替代品，特别是在 Vue 3 中，它提供了更好的 TypeScript 支持和更简洁的 API。

主要特点：

1. 更好的 TypeScript 支持: Pinia 提供了更好的 TypeScript 支持，使得在 TypeScript 项目中使用更为方便。
2. 简洁的 API: Pinia 的 API 更为简洁和直观，使得代码更易于编写和维护。
3. 与 Composition API 配合: Pinia 能够很好地与 Vue 3 的 Composition API 配合使用。

为什么 Vue 3 开始推荐使用 Pinia

在 Vue 3 中，由于引入了 Composition API，这使得状态管理可以更加灵活和高效。Pinia 正是为了更好地配合 Composition API 而设计的，它提供了更简洁的 API 和更好的 TypeScript 支持，使得状态管理更加高效和强大。

Pinia 的常见写法

1. 创建一个 store

首先，你需要创建一个 store。在 Pinia 中，store 是一个简单的 JavaScript 对象，包含了状态和一些方法。

import { defineStore } from 'pinia';

export const useMyStore = defineStore({
  id: 'myStore',
  state: () => ({
    count: 0
  }),
  actions: {
    increment() {
      this.count++;
    }
  }
});

2. 在组件中使用 store

在组件中，你可以使用 setup 函数来使用 store。

<template>
  <button @click="increment">{{ count }}</button>
</template>

<script setup>
import { useMyStore } from '@/stores/myStore';

const store = useMyStore();

const count = ref(store.count);
const increment = () => {
  store.increment();
};
</script>

这样，你就可以在组件中使用 Pinia store 来管理状态了。希望这份文档能够帮助你更好地理解 Vuex 和 Pinia 的用途和使用方法！