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得到对应的store
     const 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>