使用vuex实现一个简单的小应用

代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>vue</title><script src="../js/vue.js"></script><script src="../js/vue-router.js"></script><script src="../js/vuex.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js"></script><!-- 引入样式 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><!-- 引入组件库 --><script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body><div id="app"><template><el-table:data="tableData"style="width: 100%"><el-table-columnprop="id"label="编号"width="180"></el-table-column><el-table-columnprop="name"label="栏目名称"width="180"></el-table-column><el-table-columnlabel="图标"><template v-slot="scope"><img :src="scope.row.icon" width="100px" height="100px"></template></el-table-column></el-table></template></div><script>let { mapState, mapGetters, mapMutations, mapActions } = Vuexlet store = new Vuex.Store({state: {tableData: []},mutations: {SET_TABLEDATA(state,payload) {state.tableData = payload}},actions: {// 异步请求findAllCategories(context){$.get('http://203.195.246.58:5588/category/findAll',(res) => {if(res.status === 200) {context.commit('SET_TABLEDATA',res.data)}})} }})let vm = new Vue({el: '#app',data: {},computed: {...mapState(['tableData'])},store,methods: {// 映射vuex中的actions方法...mapActions(['findAllCategories'])},created() {// 调用请求接口方法this.findAllCategories()}})</script>
</body>
</html>

实现的效果如下图所示：

使用vuex实现一个简单的小应用相关推荐

【vue2.0进阶】案例：用Vuex实现一个简单的计算器
昨天我们学习了Veux的几个重要的核心概念.当然只讲概念还不够,必须要结合上案例才能理解得更深刻. 马上就开始我们今天的案例:用Vuex实现一个简单的网页计算器. 我们之前的章节说过,Vuex适合在较 ...
用c语言简单办法做一个字典_幼儿园手工，用废纸筒做一个简单的小蝴蝶，有教程...
幼儿园的手工,除了用卡纸做各种简单的小制作外,纸筒也是常用的手工材料. 下面用纸筒做一个简单的小蝴蝶,做法很简单. 制作过程: 准备材料废纸筒.剪刀.胶.水彩笔,纸板. 在纸筒上剪下五个圈圈剪完的 ...
3.2 Lucene实战：一个简单的小程序
在讲解Lucene索引和检索的原理之前,我们先来实战Lucene:一个简单的小程序! 一.索引小程序首先,new一个java project,名字叫做LuceneIndex. 然后,在project ...
unity编写一个简单的小游戏
unity编写一个简单的小游戏简易fly bird的制作关于flybird 场景的搭建和素材的导入使用素材搭建game和scene 制作柱体 bird的script column的sprite ...
c语言写一个简单的小游戏-推箱子
在学习C语言之后,写了一个简单的小游戏来锻炼自己的代码以及C语言知识的掌握能力. 推箱子作为手机上最常见的简单游戏,其代码也相对简单,想法也比较简单,下面为其代码和运行图. /************ ...
（超多图）基于Android studio开发的一个简单入门小应用（超级详细！！）（建议收藏）
基于Android studio开发的一个简单入门小应用一.前言二.前期准备三.开发一个小应用五.运行应用一.前言在暑假期间,我学习JAVA基础,为了能早日实现自己用代码写出一个app的& ...
一个简单的c 游戏编程语言,编程达人 c语言写一个简单的小游戏-推箱子
在学习C语言之后,写了一个简单的小游戏来锻炼自己的代码以及C语言知识的掌握能力. 推箱子作为手机上最常见的简单游戏,其代码也相对简单,想法也比较简单,下面为其代码和运行图. /************ ...
影视解说短视频怎么配音？只需一个简单的小技巧，配得又快又好
影视解说短视频怎么配音?只需一个简单的小技巧,配得又快又好很多做影视解说短视频的小伙伴们在做配音的时候都会遇到一个难题,那就是自己配音的话,很难把握节奏,而且需要花费的时间也比较长.毕竟我们自己配音 ...
奶气萌娃的声音怎么做？一个简单的小方法，奶娃配音轻松拿捏
奶气萌娃的声音怎么做?一个简单的小方法,奶娃配音轻松拿捏平时在刷短视频的时候,经常会看到可可爱爱的短视频,配音则是奶气萌娃的声音,着实可爱,萌化人心.那么,如果我们自己也想要做这种可爱的奶气萌娃的声 ...
使用手机陀螺仪完成一个简单的小游戏
原文链接: 使用手机陀螺仪完成一个简单的小游戏上一篇: vue-codemirror 代码编辑器下一篇: js setTimeout setInterval 通过旋转手机,控制小球的移动 eve ...

使用vuex实现一个简单的小应用

使用vuex实现一个简单的小应用相关推荐

最新文章

热门文章