Pinia小菠萝(状态管理器)

Pinia 是一个专为 Vue 3 设计的状态管理库，它借鉴了 Vuex 的一些概念，但更加轻量灵活。下面将详细介绍如何使用 Pinia 状态管理库：

1. 安装 Pinia

   • 使用 npm：在项目目录下运行npm install pinia。
   • 使用 yarn：在项目目录下运行yarn add pinia。

2. 创建 Pinia 实例

   • 在入口文件中引入并创建实例：在项目的入口文件（通常是main.js或main.ts）中，导入并创建一个 Pinia 实例，然后将其挂载到应用程序上。

import './assets/main.css'import { createApp } from 'vue'
import App from './App.vue'//1.到入createPinia
import { createPinia } from 'pinia'//2.执行方法得到实例
const pinia = createPinia()//3.把pinia实例加入到app应用中createApp(App).use(pinia).mount('#app')

                2.自定义一个组件，该类编写在components/stores/counter.js

// 导入一个方法 defineStoreimport {defineStore} from 'pinia'
import { ref } from 'vue'export const useCounterStore = defineStore('counter',()=>{const count = ref(0)//定义修改数据的方法(active 同步 + 异步)const increate = () =>{count.value++;}//将对象的方法使用return供组件使用return {count,increate}})

在App.vue中使用该组件

<script setup>
//1.导入 use 打头的方法
import { useCounterStore } from './stores/counter';//2.执行方法得到store实例对象
const counterStore = useCounterStore();
</script><template><div><p>Count: {{ counterStore.count }}</p><button @click="counterStore.increate()">Increment</button></div>
</template><style scoped></style>

测试  结果：

getter方法的定义

    //getter的定义const doubeleCount = computed(() =>count.value * 2)//将对象的方法使用return供组件使用return {count,increate,doubeleCount}

<template><div><p>Count: {{ counterStore.count }}</p><p>DoubleCount:{{ counterStore.doubeleCount }}</p></div>
</template>

效果：

异步action

首先安装依赖 npm install axios

其次，在组件中导出调用异步的方法getList

// 导入一个方法 defineStore
import {defineStore} from 'pinia'
import { ref,computed } from 'vue'
import axios from 'axios'const API_URL = 'https://jsonplaceholder.typicode.com/todos'export const useCounterStore = defineStore('counter',()=>{//定义异步actionconst list = ref([])const getlist = async () =>{const res = await axios.get(API_URL)list.value = res.dataconsole.log(list.value);}//将对象的方法使用return供组件使用return {getlist,list}
})

在组件中，引入并且调用方法即可

<template><div><p>Count: {{ counterStore.count }}</p><p>DoubleCount:{{ counterStore.doubeleCount }}</p><button @click="counterStore.increate()">Increment</button><button @click="counterStore.getlist()">getListData</button><hr><ol v-for="item in counterStore.list" :key="item.id"><li >{{ item.title }}</li><li >{{ item.completed }}</li><li >{{ item.userId }}</li></ol></div>
</template>

效果：

初始界面：

点击getListData按钮后：

storeToRefs解构赋值

首先，引入相关依赖 storeToRefs，然后将响应式对象进行解构赋值

( 方法不需要使用storeToRefs解构赋值 切记！！！)

//针对响应式对象的解构赋值
const { count, doubeleCount, list } = storeToRefs(counterStore);
//对于方法的解构赋值(不需要使用storeToRefs)
const { increate,getlist } = counterStore;

此外，方法解构赋值，在调用方法时，括号加不加都行