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

本次分享内容：Vue3+Pinia 实现计数器案例
主要学习Pinia的使用方法
1、效果：普通计数器/Getters数据/异步增加/store.$reset方法/store.$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>

router文件中index.js

代码：

import { createRouter, createWebHistory } from "vue-router";

// 引入组件
import Counter from "@/components/Counter.vue";
import ToDoList from "@/components/ToDoList.vue";

// 配置路由
const routes = [
  {
    path: "/",
    redirect: "/counter",
    children: [
      {
        path: "counter",
        component: Counter,
      },
      {
        path: "todolist",
        component: ToDoList,
      },
    ],
  },
];

// 创建路由实例
const router = createRouter({
  history: createWebHistory(),
  linkExactActiveClass: "exact-active",
  linkActiveClass: "active",
  routes,
});

export default router;

component文件下的Counter.vue组件

普通计数器

store中useCounterStore.js

官网中提到：
可以认为 state 是 store 的数据 (data)，getters 是 store 的计算属性 (computed)，而 actions 则是方法 (methods)。

Getters数据

对应useCounterStore.js

doubleCount ：成倍增加，使用state.num进行二次计算—类似computed

异步增加

对应useCounterStore.js

store.$reset方法（重置方法）

官网中提到：

直接使用即可重置数据

store.$patch方法（修改方法）

代码：
Counter.vue

<template>
    <div class="container">
        <!-- 第一组 -->
        <p class="group-title">普通增加</p>
        <div class="btn-group">
            <!-- 点击num--：直接减 -->
            <button class="btn" @click="num--">-</button>
            <!-- 响应式数据num -->
            <div class="num">{{ num }}</div>
            <button class="btn" @click="increment">+</button>
        </div>

        <!-- 第二组 -->
        <p class="group-title">Getters数据</p>
        <div class="btn-group">
            <button class="btn" @click="num--">-</button>
            <div class="num">{{ doubleCount }}</div>
            <button class="btn" @click="increment">+</button>
        </div>

        <!-- 第三组 -->
        <p class="group-title">异步增加</p>
        <div class="btn-group">
            <button class="btn" @click="asyncDecrement">-</button>
            <div class="num">{{ num }}</div>
            <button class="btn" @click="asyncIncrement">+</button>
        </div>

        <!-- 第四组 -->
        <p class="group-title">store.$reset方法</p>
        <div class="btn-group">
            <!--store.$reset:pinia的重置方法  -->
            <button class="btn" @click="store.$reset">重置</button>
        </div>

        <!-- 第五组 -->
        <p class="group-title">store.$patch方法</p>
        <div class="btn-group">
            <!-- store.$patch方法：变更 -->
            <input type="text" class="numInput" v-model="newnum">
            <button class="btn" @click="setHandle">设置</button>
        </div>
    </div>
</template>

<script setup>
import { useCounterStore } from "../store/useCounterStore";
import { storeToRefs } from "pinia";
import { ref } from "vue";

// 这个数据和输入框做双向绑定
const newnum = ref("");

const store = useCounterStore();//拿到仓库
//解构仓库数据---useCounterStore.js
const { num, doubleCount } = storeToRefs(store)

const { increment, asyncIncrement, asyncDecrement } = store


function setHandle(){
    store.$patch({
        num:~~newnum.value//~~:转成数字
    });
    newnum.value = ""
}
</script>

<style scoped>
.container>.btn-group {
    /* outline: 1px solid red; */
    width: 280px;
    margin: 20px auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.num {
    font-size: 32px;
    font-weight: 300;
}

.btn {
    height: 30px;
    outline: none;
    font-size: 16px;
    font-weight: 100;
    cursor: pointer;
    padding: 0 10px;
}

.numInput {
    width: 200px;
    height: 30px;
    margin-right: 10px;
}

.group-title {
    text-align: center;
    margin-bottom: 0;
    font-weight: 200;
    font-size: 20px;
}
</style>

useCounterStore.js

// 仓库文件


import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
    state: () => {
        return {
            num: 0
        }
    },
    getters: {//针对上面state的数据做二次计算（看作computed）
        doubleCount: (state) => state.num * 2
    },
    actions: {
        // 同步方法
        increment() {
            this.num++
        },
        decrement() {
            this.num--;
        },
    },
    // 异步
    async asyncIncrement(){
        await new Promise((resolve)=>setTimeout(resolve,1000));
        this.increment()
    },
    async asyncDecrement() {
        await new Promise((resolve) => setTimeout(resolve, 1000));
        this.decrement()
    },
})

总结：
1、主要学习pinia的基本使用：State/Getter/Action/store.$reset方法（重置方法）/store.$patch方法（修改方法）
2、如果是获取方法，直接从 store（仓库） 里面解构出来即可
eg：// 从仓库将方法解构出来
const { increment, asyncIncrement, asyncDecrement } = store;
3、理解state/getters/actions
state：仓库的核心，主要是用于维护仓库的数据，
getters：用于对数据做二次计算的，等同于 store 的 state 的计算值，
actions ：对仓库状态进行操作的方法
4、Pinia 中没有 mutations，同步方法和异步方法都放在 actions 里面