vue第十九单元(mapState mapMutations等方法的使用)
第十九单元(mapState mapMutations等方法的使用)
#课程目标
1.熟练使用mapState
2.熟练使用mapGetters
3.熟练使用mapActions
4.熟练使用mapMutations
#知识点
首先在讲解用法前我们先创建一个仓库实例
import Vue from 'vue'
import Vuex from 'vuex'
import {Mockurl} from '@/until'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
count:0,
data:[],
sex:0
},
mutations: {
changeData(state,actions){
state.data = [...actions.data]
},
add(state){
++state.count
},
dis(state){
--state.count
}
},
actions: {
getData(store){
axios.get('/get/data').then(data=>{
store.commit('changeData',data)
})
}
},
getters:{
sex(state){
return state.sex === 0 ? '男':'女'
}
}
})
#mapState读取仓库状态
<template>
<div>{{count}}</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
computed:{
...mapState(['count']),
}
}
</script>
#mapMutations 修改仓库状态
<template>
<div>
<span @click="dis" >-</span>
{{count}}
<span @click="add" >+</span>
</div>
</template>
<script>
import { mapMutations } from 'vuex'
export default {
methods:{
...mapMutations(['add','dis'])
}
}
</script>
#mapActions 异步处理
<script>
import { mapActions } from 'vuex'
export default {
methods:{
...mapActions(['getData'])
}
}
</script>
#getters 数据派生
<template>
<div>
性别:{{sex}}
</div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
computed:{
...mapGetters(['sex'])
}
}
</script>
#授课思路
#案例作业
实现一个购物车功能
vue第十九单元(mapState mapMutations等方法的使用)的更多相关文章
- react第十九单元(react+react-router-dom+redux综合案例1)
第十九单元(react+react-router-dom+redux综合案例1) #课程目标 复习 综合练习 实战能力 #知识点 react react-router redux #授课思路 #案例和 ...
- vue第十八单元(单向数据流 vuex状态管理)
第十八单元(单向数据流 vuex状态管理) #课程目标 1.理解什么是数据管理模式 2.什么是vuex 3.什么时候使用vuex 4.vuex安装及工作原理 5.vuex语法 #知识点 1.首先来看下 ...
- vue第十六单元(element-ui vue-lazyload 等常用插件)
第十六单元(element-ui vue-lazyload 等常用插件) #课程目标 1.掌握插件的引入方式 2.精通UI框架 3.掌握前端常见的几种效果实现 #知识点 一.elementUI的使用 ...
- vue第十四单元(认识单页面应用,理解vue-router的基本用法)
第十四单元(认识单页面应用,理解vue-router的基本用法) #课程目标 1.了解单页应用与多页应用以及各自的优缺点 2.掌握路由如何实现单页应用 3.精通路由的基本语法 #知识点 #一.单页应用 ...
- vue第十二单元(vue中过渡效果的实现)
第十二单元(vue中过渡效果的实现) #课程目标 熟练掌握transition组件的用法 熟练使用transition组件做过渡特效 熟练使用transition组件做动画特效 了解使用transit ...
- vue第十五单元(熟练使用vue-router插件)
第十五单元(熟练使用vue-router插件) #课程目标 1.掌握路由嵌套 2.掌握导航守卫 #知识点 #一.路由嵌套 很多时候,我们会在一个视口中实现局部页面的切换.这时候就需要到了嵌套路由. 也 ...
- Vue(十九)Vuex
Vuex 1. 简介 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 简单来说,用来集中管 ...
- vue学习(十九) 生命周期 了解
生命周期:从vue实例创建.运行.到销毁期间,总是伴随着各种各样的事件,这些事件统称为生命周期 生命周期钩子:就是生命周期事件的别名而已 生命周期钩子==生命周期函数==生命周期事件 生命周期函数分类 ...
- 第十九单元 nfs服务
===============服务端 介绍: NFS 是Network File System的缩写,即网络文件系统.一种使用于分散式文件系统的协定,由Sun公司开发,于1984年向外公布.功能是通过 ...
随机推荐
- 【硬件】HDMI接口HPD原理
目录 一.什么是HPD? 二.HDMI的HPD(热插拔)原理 三.HDMI源端对HPD信号有什么要求? 由于项目需要通过HDMI获取EDID的数据,需要学习一下其获取的工作原理,所以在这里记录下. 一 ...
- 历时两年零三个月,从刚毕业的外包到现在的阿里P7offer,我只做了这几件事
前言 最近,金九银十在即,很多人都在准备面试,特别给大家总结了 Java 程序员面试必备题,这份面试清单是我从 去年开始收集的,一方面是给公司招聘用,另一方面是想用它来挖掘我在 Java 技术栈中的技 ...
- 使用Sidechain EQ优化FLStudio的贝斯和底鼓
混音的目标之一是平衡各个声音的音量.当两个声音占据相同的频率范围时,有时就比较难处理.这是贝司和底鼓之间经常会碰到的情况.很多时候我们会使用压缩(compression)来降低他们的音量. 然而,有 ...
- JPA query between的多种方式(mongodb为例)
背景 JPA+MongoDB查询,给定一段时间范围查询分页结果,要求时间范围包含. Page<Log> findByCtimeBetweenOrderByCtime( LocalDateT ...
- SQL相关子查询是什么?和嵌套子查询有什么区别?
目录 两者的各种叫法 相关子查询MySQL解释 相关子查询Wikipedia解释 相关子查询执行步骤拆解 相关子查询和嵌套查询的区别 参考资料 两者的各种叫法 相关子查询叫做:Correlated S ...
- 这些Stream流的常用方法你得记住,步骤简单不麻烦!
forEach遍历 /* forEach:该方法接收一个Consumer接口函数,将每一个流元素交给该函数处理 简单记: forEach方法:用来遍历流中的数据 是一个终结方法,遍历之后就不能继续调用 ...
- CodeChef-LECOINS Little Elephant and Colored Coins 题解
CodeChef-LECOINS Little Elephant and Colored Coins Little Elephant and Colored Coins The Little Elep ...
- Codeforces Round #660 (Div. 2) A、B、C题解
A. Captain Flint and Crew Recruitment #构造 题目链接 题意 定义一类正整数,能够被\(p*q\)表示,其中\(p.q(1<p<q)\)均为素数,称之 ...
- Access数据库简介
一.Access数据库的简介 1.microsoft office access是由微软发布的关联式数据库管理系统.它结合了 microsoft jet database engine 和 图形用户界 ...
- Sharding-JDBC分片策略详解(二)
一.分片策略 https://shardingsphere.apache.org/document/current/cn/features/sharding/concept/sharding/ Sha ...