Vue使用 Pinia 进行状态管理

一.什么是 Pinia？

Pinia 是一个适用于 Vue.js 的状态管理库，它采用了组合式 API 的理念，使得状态管理变得更加简单、直观和灵活。与传统的 Vuex 相比，Pinia 提供了更好的 TypeScript 支持，同时也更加适合大型应用程序和复杂状态逻辑的管理。

二.安装 Pinia

首先，我们需要在 Vue 项目中安装 Pinia。你可以通过 npm 或 yarn 进行安装

npm install pinia
# 或者
yarn add pinia

三.创建 Pinia 实例

在使用 Pinia 进行状态管理之前，我们需要创建一个 Pinia 实例。通常，你会在应用程序的入口文件中完成这一步

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

const app = createApp(App);
const pinia = createPinia();

app.use(pinia);
app.mount('#app');

四.定义状态和操作

在 Pinia 中，我们使用 Store 实例来管理状态和操作。一个 Store 实例可以包含多个状态和操作。让我们创建一个名为 useCounterStore 的 Store，并在其中定义了计数状态、双倍计数的计算属性以及增加计数的操作。

1.对象方式(与 Vue 的选项式 API 类似)

//counter.js

import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }), // 定义状态，初始值为 0

  getters: {
    double: (state) => state.count * 2, // 定义计算属性，返回 count 的双倍值
  },

  actions: {
    increment() {
      this.count++; // 定义一个增加计数的操作
    },
  },
});

 组件内使用

<script setup>
import { useCounterStore } from './path-to-your-store';
    const counterStore = useCounterStore();

    // 在这里可以使用 counterStore.count、counterStore.double、
    // counterStore.increment
    // 以及其他你在 Store 中定义的内容
  }
</script>

 2.函数方式(与 Vue 组合式 API 的 setup 函数 相似)

//counter.js

import { ref, computed } from 'vue';
import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', () => {
  // 定义计数状态
  const count = ref(0);

  // 计算属性，返回计数的双倍值
  const doubleCount = computed(() => count.value * 2);

  // 定义增加计数的操作
  function increment() {
    count.value++;
  }

  // 在这里返回我们想要在 Store 中暴露的内容
  return { count, doubleCount, increment };
});

组件内使用

<script setup>
import { useCounterStore } from './path-to-your-store';
    const counterStore = useCounterStore();
    // 在这里可以使用 counterStore.count、counterStore.doubleCount、
    // counterStore.increment
    // 以及其他你在 Store 中定义的内容
</script>

五.总结

通过使用 Pinia 的组合式 API，我们可以更轻松地进行状态管理。Pinia 提供了一个灵活的方式来定义和使用 Store，让我们的代码更加清晰和可维护。