Pinia小菠萝(状态管理器)

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

安装 Pinia

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

创建 Pinia 实例

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

javascript 复制代码

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

javascript 复制代码

// 导入一个方法 defineStore

import {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中使用该组件

html 复制代码

<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方法的定义

javascript 复制代码

    //getter的定义
    const doubeleCount = computed(() =>
        count.value * 2
    )

    //将对象的方法使用return供组件使用
    return {
        count,
        increate,
        doubeleCount
    }

javascript 复制代码

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

效果：

异步action

首先安装依赖 npm install axios

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

javascript 复制代码

// 导入一个方法 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',()=>{
    //定义异步action
    const list = ref([])
    const getlist = async () =>{
        const res = await axios.get(API_URL)
        list.value = res.data
        console.log(list.value);
    }
    //将对象的方法使用return供组件使用
    return {
        getlist,
        list
    }
})

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

html 复制代码

<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解构赋值切记！！！)

javascript 复制代码

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

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