Vue3+Pinia 实现计数器案例（#仅学习）

原创

已于 2024-04-30 17:57:35 修改 · 1k 阅读

24 ·

CC 4.0 BY-SA版权

文章标签：

#学习 #javascript #前端

于 2024-04-30 17:26:41 首次发布

本文详细介绍了如何在Vue3中使用Pinia库实现计数器功能，包括State的管理、Getters的数据计算、actions的同步与异步操作，以及store的reset和patch方法的应用。

本次分享内容：Vue3+Pinia 实现计数器案例
主要学习Pinia的使用方法
1、效果：普通计数器/Getters数据/异步增加/store. $rese t 方法 / s t ore .$ patch方法
请添加图片描述

2、准备工作
使用pinia之前记得现在main.js文件挂载pinia
在这里插入图片描述
官网地址：https://pinia.vuejs.org/zh/getting-started.html

3、页面准备
在这里插入图片描述
App.vue

to=“/counter”，就是点击跳转的地址，写在router文件里

代码：

<template>
  <div class="container">
    <div class="linkContainer">
      <router-link to="/counter">计数器</router-link>
      <router-link to="/todolist">待办事项</router-link>
    </div>
    <router-view></router-view>
  </div>
</template>

<script setup>
</script>

<style scoped>
.container>h1 {
  font-weight: 200;
  text-align: center;
}
.linkContainer {
  text-align: center;
}
a {
  font-weight: 500;
  color: #646cff;
  text-decoration: inherit;
  margin: 0 40px;
}
a:hover {
  color: #535bf2;
}
</style&g