首页 > 其他分享 >Pinia小菠萝(状态管理器)

Pinia小菠萝(状态管理器)

时间:2024-11-07 15:45:55浏览次数:5  
标签:count const pinia Pinia 管理器 import counterStore 方法 菠萝

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

  1. 安装 Pinia

    • 使用 npm:在项目目录下运行npm install pinia
    • 使用 yarn:在项目目录下运行yarn add pinia
  2. 创建 Pinia 实例

    • 在入口文件中引入并创建实例:在项目的入口文件(通常是main.jsmain.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

// 导入一个方法 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中使用该组件

<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',()=>{
    //定义异步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
    }
})

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

<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;

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

标签:count,const,pinia,Pinia,管理器,import,counterStore,方法,菠萝
From: https://blog.csdn.net/qq_58341172/article/details/143591856

相关文章

  • 在 Windows Server 2025 中,您可以通过 Certutil、PowerShell 和证书管理器工具来进行
    certmgr.msc是Windows操作系统中的一个管理工具,它用于管理和查看证书存储。通过certmgr.msc,用户可以方便地浏览和管理个人证书、受信任的根证书颁发机构(CA)、中间证书颁发机构等不同证书存储区。 1. certmgr.msc 是什么?certmgr.msc是证书管理器(CertificateM......
  • Icaros 3.3.3 测试版 2 是一组轻量级、高质量的 Windows Shell 扩展,能够为几乎任何视
    Suggested useful videotoolsforFREEIcaros3.3.3beta2 isacollectionoflightweight,highquality,WindowsShellExtensions,whichiscapableofprovidingWindowsExplorerthumbnailsforessentiallyanyvideomediafiletype.IcaroscanprovideWindows......
  • vue3 vue-i18n和pinia使用
    安装vue-i18n和Pinia(状态管理库)npminstallvue-i18n@10npminstallpinia 在main.js中引入i18n和piniaimport'./assets/main.css'import{createApp}from'vue'importAppfrom'./App.vue'importi18nfrom"./i18n";//引入pini......
  • 【comfyui教程】comfyui入门|超详细安装教程(汉化+管理器)
    前言大家好,我是小33上篇文章,我给大家分析了AI绘画的底层原理和comfyui的生图逻辑。今天我给大家分享的是怎么安装comfyUI。网上安装comfyui的教程有很多,但是说的有点偏复杂了,特别是安装节点的时候,其实没那么难,这篇文章我就给大家分享下如何快速安装comfyui及各个节点的......
  • 关于pinia持久化问题失败这件事(另附官方持久化教程)
    唉,持久化大坑,怎么搞网上大多数的解释是这里的pinia定义了两次的问题,但是真的是这样吗好多人发现,我没定义两次也会啊,这是为啥以此为例,发现华点没有,你想存的信息直接返回的时候返回掉就行,如果不是直接返回掉而是用get方法包装的话就会失效总之,想存的数据必须直接返......
  • RMAN之环境配置(二)---Backups to a Media Manager备份到介质管理器
    在生产库中,一般都选用第三方的磁带管理软件,但是基本对于oracle的备份和恢复都是通过调用RMAN来实现的。确定mediamanagerLibrary(媒体管理库)的位置在尝试将RMAN与媒体管理器一起使用之前,请确定媒体管理库的位置。分配或配置RMAN与媒体管理器通信的通道时,在命令行ALL......
  • 微软开放 Android in File Explorer:Win10 / Win11 文件管理器可无线管控安卓手机存储
    万象系统之家 10月29日消息,微软公司已逐步面向所有Windows10、Windows11用户,开放“AndroidinFileExplorer”,让用户不需要借助USB数据线,就能在文件管理器中操作安卓手机存储。微软的Android文件资源管理器集成功能为用户提供了更便捷的跨设备文件管理体验。随着......
  • Pyside6 布局管理器(5)--- QFormLayout的使用
    一、QFormLayout的介绍(官翻)QFormLayout是一个方便的布局类,它以两列的形式布局其子元素。左列由标签组成,右列由“字段”小部件(行编辑器、数字显示框等)组成。 传统上,这种两栏布局是通过使用QGridLayout实现的。QFormLayout是一种更高级别的替代方案,具有以下优点:遵守不同平台......
  • MT管理器永久解锁版 不需要登录/安装即可使用
    [应用名称]应用名称:MT管理器[应用版本]应用版本:2.145[应用大小]应用大小:22.5m[适用平台]适用平台:安卓[应用简介]MT管理器是一款功能全面、操作渐变、用户体验优秀的文件管理和apk逆向修改工具。[应用截图] [免费下载链接]下载链接https://download.csdn.net/do......
  • Windows 资源管理器显示PSD、PDF、AI 等矢量格式缩略图
    1、SageThumbsSageThumbs是一个强大的shell扩展,允许使用Pierre-eGougelet的GFL3.40库(XnViewClassic、XnViewMP 的作者)直接在Windows资源管理器中预览大量图像格式。AI、PS、EPS、PDF支持#要为AdobeIllustrator(ai)、Postscript(ps,eps)和AdobeAcrobat(pdf)文......