Vue3 Pina的使用

Pinia 是一个用于 Vue.js 应用程序的状态管理库，它旨在提供一种更现代、更简洁的方式来管理 Vue 应用的状态。Pinia 的设计灵感来自于 Vuex，但是它更加注重可组合性和 TypeScript 支持。

安装 Pinia

首先，你需要安装 Pinia。如果你正在使用 Vue 3，可以通过 npm 或 yarn 来安装：

Bash
深色版本
npm install pinia
# 或者
yarn add pinia

配置 Pinia

在你的项目中创建一个新的文件来设置 Pinia，例如 stores/index.js：

Javascript
深色版本
import { createPinia } from 'pinia';

const pinia = createPinia();

export default pinia;

然后，在主应用文件中（通常是 main.js 或 main.ts）导入并使用 Pinia：

Javascript
深色版本
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';

const app = createApp(App);

app.use(createPinia());

app.mount('#app');

创建 Store

Pinia 使用 Store 来组织状态。Store 是一个对象，其中包含状态、getter 和 action 方法。例如，你可以创建一个名为 useCounterStore 的 store：

Javascript
深色版本
// stores/counter.js
import { defineStore } from 'pinia';

export const useCounterStore = defineStore({
  // id 必须是唯一的字符串
  id: 'counter',
  state: () => ({
    count: 0,
  }),
  getters: {
    doubleCount(state) {
      return state.count * 2;
    },
  },
  actions: {
    increment() {
      this.count++;
    },
  },
});

在组件中使用 Store

在 Vue 组件中，你可以使用 defineStore 导入的函数来访问 Store：

Vue
深色版本
<template>
  <div>{{ count }}</div>
  <button @click="increment">Increment</button>
</template>

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

const counter = useCounterStore();

console.log(counter.doubleCount); // 输出 count 的两倍

counter.increment(); // 增加 count 的值
</script>

访问 Getter 和 Actions

Getter 和 Actions 可以直接通过 store 实例访问。在上面的例子中，我们展示了如何使用 getter (doubleCount) 和 action (increment)。

使用 Composition API

如果你正在使用 Composition API，可以使用 storeToRefs 辅助函数将 store 的状态属性转换为响应式引用：

Javascript
深色版本
import { storeToRefs } from 'pinia';

const { count } = storeToRefs(counter);

这样 count 就变成了一个响应式的 ref 对象，可以直接在模板中使用。

总结

以上就是使用 Pinia 进行状态管理的基本流程。Pinia 提供了更多高级特性和配置选项，可以根据项目的具体需求进一步探索和利用。