Web刷题记录——不翼而飞的余额

本文主要是介绍Web刷题记录——不翼而飞的余额，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、代码及思路解析

1、创建路由

// TODO：待补充代码，在此引入路由相关 API 
const { createRouter,createWebHistory } = VueRouter;  // TODO:待补充代码，为项目配置 history 模式的路由
const router = createRouter({// 1、配置路由模式[history]history:createWebHistory(),// 2、路由规则[routes]routes:[{path:"/",component:WalletPage},{path:"/deposit",component: DepositPage }]})

2、从pinia仓库中读取数据

1、说明 

直接取，用啥取啥，从相应的仓库中用'.'方法取

  <span id="deposit-balance"> {{store.balance}} </span>

【值得一提的是】：vue3 template中可以使用 双大括号语法

template: `<div class="deposit-page wallet-page"><div class="wallet-header"><h1>Deposit</h1><div class="wallet-balance"><h2>Balance</h2><p><!-- 2、从仓库中取数据 -->  <span id="deposit-balance"> {{store.balance}} </span><span>ETH</span></p></div></div><div class="deposit-body"><p>Please enter the amount you want to deposit:</p><input type="number" v-model="depositAmount" /><button @click="deposit">Deposit</button></div></div>`

3、完成业务逻辑

setup() {const depositAmount = Vue.ref() // 输入框中的的值->存款金额const store = useMoneyStore()  // 引入 store// TODO：待补充代码，完善点击存款按钮事件function deposit() {// 3、余额 = 现在的余额 + 输入框中输入的金额store.balance += depositAmount.value}return {deposit,store,depositAmount}}

二、知识点回顾

【前情提要】：

        本道题主要考察vue3中路由的配置以及pinia仓库的基本使用

 1、路由的基本使用

（1）配置路由

// 第一步：引入库和组件
// 引入 createRouter createWebHistory
import {createRouter,createWebHistory} from 'vue-router'
// 引入组件
import Home from '@/components/Home.vue'
import News from '@/components/News.vue'
import About from '@/components/About.vue'// 第二步：创建路由器
const router = createRouter({//路由器的工作模式history:createWebHistory(), //一个一个的路由规则routes:[ {path:'/home',component:Home},{path:'/news',component:News},{path:'/about',component:About},]
})// 第三步：暴露出去router
export default router

（2） 使用路由

1、找到导航区和展示区
2、应用路由：
   a、导航区：将a标签 替换为 RouterLink
   b、展示区：使用 RouterView 组件呈现 （告诉路由器匹配到的路由组件呈现在哪）

【注意】如果是单页面html文件 规则同上

<template><div class="app"><h2 class="title">Vue路由测试</h2><!-- 导航区 --><div class="navigate"><!-- 应用路由： 将a标签 替换为 RouterLink组件 --><RouterLink to="/home" active-class="active">首页</RouterLink><RouterLink to="/news" active-class="active">新闻</RouterLink><RouterLink to="/about" active-class="active">关于</RouterLink></div><!-- 展示区 --><div class="main-content"><!-- 应用路由： RouterView 组件呈现 --><RouterView></RouterView></div></div>
</template><script lang="ts" setup name="App">import {RouterLink,RouterView} from 'vue-router'  
</script>

 2、pinia仓库的基本使用

1. Store是一个保存：状态、业务逻辑 的实体，每个组件都可以读取、写入它。

2. 它有三个概念：state、getter、action，相当于组件中的： data、 computed 和 methods。

 （1）创建

// 引入defineStore用于创建store
import {defineStore} from 'pinia'// 定义并暴露一个store
export const useCountStore = defineStore('count',{// 动作actions:{},// 状态state(){return {sum:6}},// 计算getters:{}
})

（2）使用

使用方式：直接取，用啥取啥，从相应的仓库中用'.'方法取 sumStore.sum

1、引入对应的useXxxxxStore

2、调用useXxxxxStore得到对应的store

3、用'.'方法 sumStore.sum 使用

<template><h2>当前求和为：{{ sumStore.sum }}</h2>
</template><script setup lang="ts" name="Count">// 1、引入对应的useXxxxxStore	import {useSumStore} from '@/store/sum'// 2、调用useXxxxxStore得到对应的storeconst sumStore = useSumStore()
</script><template><ul><li v-for="talk in talkStore.talkList" :key="talk.id">{{ talk.content }}</li></ul></template><script setup lang="ts" name="Count">import axios from 'axios'import {useTalkStore} from '@/store/talk'const talkStore = useTalkStore()</script>

 

这篇关于Web刷题记录——不翼而飞的余额的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---