【10 Vue全家桶 – Pinia状态管理】

最新推荐文章于 2024-05-31 12:13:40 发布

努力修福报

最新推荐文章于 2024-05-31 12:13:40 发布

阅读量265

点赞数

分类专栏： VUE 学习文章标签： vue.js 数学建模前端

本文链接：https://blog.csdn.net/qq_31421983/article/details/130926141

版权

本文详细介绍了Pinia，Vue.js的状态管理库，包括Pinia与Vuex的区别，如何创建和使用Pinia的Store，核心的State、Getters和Actions的用法，特别是Actions如何处理异步操作。

摘要由CSDN通过智能技术生成

1 什么是Pinia

在这里插入图片描述

Pinia和Vuex的区别

在这里插入图片描述

3 使用Pinia

在这里插入图片描述

4 认识Store

在这里插入图片描述

5 pinia的基本使用

在这里插入图片描述

1 创建pinia

在这里插入图片描述
在app中使用pinia

2 创建store

可以创建多个store

// 定义关于counter的store
import {
    defineStore } from 'pinia'


//创建store
const useCounter = defineStore("counter", {
   
  state: () => ({
   
    count: 99,
    
  })
  
})
//导出
export default useCounter

3 使用store

<template>
  <div class="home">
    <h2>Home View</h2>
    //模板中使用
    <h2>count: {
   {
    counterStore.count }}</h2>
    <h2>count: {
   {
    count }}</h2>
    <button @click="incrementCount">count+1</button>
  </div>
</template>

<script setup>

  import {
    storeToRefs } from 'pinia'
  //导入store
  import useCounter from '@/stores/counter';
  //获取store
  const