pinia入门案例-获取频道分类列表并渲染
使用pinia的action异步获取频道分类列表数据并渲染到页面中。
接口:
GET请求,http://geek.itheima.net/v1_0/channels
store/channel.js
import {defineStore} from 'pinia'
import {ref, computed} from "vue"
import axios from 'axios'
export const useChannelStore = defineStore('Channel', () => {
// 定义state
const channelList = ref([])
// 定义actions
const getChannelList = async () => {
const resp = await axios.get('http://geek.itheima.net/v1_0/channels')
console.log(resp);
// 赋值给state
channelList.value = resp.data.data.channels
}
return {
channelList,
getChannelList,
}
})
app.vue
<script setup>
// 1. 导入store
const channelStore = useChannelStore();
</script>
<template>
<button @click="channelStore.getChannelList()">获取新闻列表</button>
<ul>
<li v-for="item in channelStore.channelList" :key="item.id">
{{ item.name }}
</li>
</ul>
</template>
pinia入门案例-获取频道分类列表并渲染的更多相关文章
- Spring IOC - 控制反转(依赖注入) - 入门案例 - 获取对象的方式 - 别名标签
1. IOC - 控制反转(依赖注入) 所谓的IOC称之为控制反转,简单来说就是将对象的创建的权利及对象的生命周期的管理过程交 由Spring框架来处理,从此在开发过程中不再需要关注对象的创建和生命周 ...
- axios模块封装和分类列表实现
这个作用 主要还是为了让代码更加的,清晰. 不要全部都放到 created(){} 这个方法下面.把这些代码全部抽离出去. 这里就只是去调用方法.1. src 目录下,新建文件夹--- rest ...
- phpcms V9首页 频道页 列表页 推荐位 简单获取文章浏览量和评论统计
phpcms V9首页 频道页 列表页 推荐位 简单获取文章浏览量和评论统计 列表取得数据方法: {pc:content action="lists" catid="$c ...
- 一条SQL语句获取具有父子关系的分类列表(mysql)
有如下表数据: 获取“菜单”分类的子分类数据列表: SELECT a.cat_id, a.cat_name, a.sort_order AS parent_order, a.cat_id, b.cat ...
- Python-装饰器-案例-获取文件列表
import os def get_all_path(fun): '''装饰器.功能:获取全路径文件名.如:D:/tmp/12.txt :param fun: :return:file_path_li ...
- WordPress主题开发实例:获取当前分类的文章列表
思路: 如果使用默认的wordpress的方法,调出来的数据就会被后台的显示个数所限制,而我们需要的是自由控制文章数和翻页,所以我使用WP_Query 获取当前分类的方法可以通过 get_query_ ...
- SpringMvc核心流程以及入门案例的搭建
1.什么是SpringMvc Spring MVC属于SpringFrameWork的后续产品,已经融合在Spring Web Flow里面.Spring 框架提供了构建 Web 应用程序的全功能 M ...
- MyBatis入门案例、增删改查
一.MyBatis入门案例: ①:引入jar包 ②:创建实体类 Dept,并进行封装 ③ 在Src下创建大配置mybatis-config.xml <?xml version="1.0 ...
- MyBatis入门案例 增删改查
一.MyBatis入门案例: ①:引入jar包 ②:创建实体类 Dept,并进行封装 ③ 在Src下创建大配置mybatis-config.xml <?xml version="1.0 ...
- Python爬虫Scrapy(二)_入门案例
本章将从案例开始介绍python scrapy框架,更多内容请参考:python学习指南 入门案例 学习目标 创建一个Scrapy项目 定义提取的结构化数据(Item) 编写爬取网站的Spider并提 ...
随机推荐
- RK3568开发笔记(六):开发板烧写ubuntu固件(支持mipi屏镜像+支持hdmi屏镜像)
前言 编译了uboot,kernel,buildroot后,可以单独输入固件,也可以整体打包成rootfs进行一次性输入,rootfs直接更新升级这个方式目前也是常用的. 烧写器软件:RKDe ...
- MyBatis-Plus和PageHelper冲突导致Factory method sqlSessionFactory threw exception,并且如何分页显示全部
springboot开始引入了mybaits-plus.后来想引入pagehelper进行分页,引入之后报错 Error starting ApplicationContext. To display ...
- ElasticSearch系列——文档操作
文章目录 Elasticsearch的增删查改(CURD) 一 CURD之Create 二 CURD之Update 三 CURD之Delete 四 CURD之Retrieve Elasticsearc ...
- 前端三件套系例之JS——JavaScript基础、JavaScript基本数据类型、JavaScript函数
文章目录 1 JavaScript基础 1.JavaScript是什么 2.JavaScript介绍 2-1 ECMAScript和JavaScript的关系 2-2 ECMAScript的历史 3. ...
- 造轮子之ORM集成
Dotnet的ORM千千万,还是喜欢用EF CORE 前面一些基础完成的差不多了,接下来可以集成数据库了,官方出品的ORM还是比较香.所以接下来就是来集成EF CORE. 安装包 首先我们需要安装一下 ...
- C#学习笔记--逻辑语句(分支和循环)
逻辑语句 条件分支语句 条件分支语句可以让顺序执行的代码逻辑产生分支,满足对应条件地执行对应代码逻辑. IF语句 //IF语句块 int a=5; if(a>0&&a<15 ...
- Hall定理(霍尔定理)证明及推广
引言 网络上有许多Hall定理的证明,但是对于Hall定理的几个推广的介绍却少之又少,因此本文来简单介绍一下 注:为了使这篇文章看起来简单易懂,本文将不会使用图论语言,会图论的朋友们可以自行翻译为图论 ...
- Unity - UIWidgets 6. 显示列表
为了更贴近游戏实际ui的效果和使用环境, 从而讨论上一节遗留的问题, 列表显示是必不可少的 参考 修改之前的HomeRoute, private Widget CreateListTest() { L ...
- 如何解决Asp.Net Core 3.1上传文件出现跨域
这个问题挺奇怪的,明明就是文件过大的问题,却出现了跨域的错误,搞不懂,有了解的大佬请指教. 但问题还是解决了,其实就是Nginx默认上传大小限制为1M,如果超出了,则出现跨域的错误. 一.自定义Ngi ...
- 一个基于.NET7的开源DNS服务 DnsServer 的部署使用经验分享
前言 接上篇 docker-bind 的使用搭建了一个 dns 服务,本篇将介绍另外一款 DnsServer 的部署和使用,更专注,更轻量. 特点 基于 .NET 7 实现 ,支持 Windows.L ...