Vue Pinia

Vue 状态管理库 Pinia，非常好用

Pinia

Pinia 是一款轻量级的 Vue 状态管理库，可以使用它跨组件或页面共享状态。

相当于组件的组件，可以用来定义一些共用的东西，也可以用来传递数据。

能用 vue3 的组合式语法来写，与本来的组件完全一致，非常直观好用

1. 引入

先安装

1	npm i pinia

然后在 main.js 引入

import { createPinia } from 'pinia';

const app = createApp(App);
app.use(pinia);

2. 基础使用

一般来说，先在 src 文件夹里创建一个 stores 文件夹，专门存放 pinia 组件

比如定义一个计数器的组件，使用了组合式语法，定义一个响应式数据和一个方法

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

export const useCounterStore = defineStore('counter', () => {
    const count = ref(0);

    const increment = () => {
        count.value++;
    };

    return {
        count,
        increment,
    };
});

步骤是先引入defineStore，使用它定义一个组件供导出使用

然后在 vue 文件里导入useCounterStore，使用变量接收，就能像这样使用了

<script setup>
import { useCounterStore } from './stores/counter';
const counterStore = useCounterStore();
console.log(counterStore);
</script>

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

3. getters 实现

使用computed计算属性实现，然后导出，比如

1	const doubleCount = computed(() => count.value * 2);

4. 异步请求

比如网络请求 axios，直接在 store 里面写，写完导出，就能直接在引入的地方用了

5. 解构赋值

看之前的代码，引入使用的时候每次都要写counterStore.xxx，很啰嗦。

可以使用解构赋值来赋值给变量

1
2
3

const { count, doubleCount } = storeToRefs(counterStore);
// 注意，这个方法只能获取到响应式数据，没法获得方法
// 获取方法，比如increment，直接不用这个函数，直接解构赋值就行了（因为是引用值）

注意要用它的storeToRefs方法，不然直接写的话会丢失响应式数据的特性。获取到的是响应式对象