Vue学习之--------深入理解Vuex之getters、mapState、mapGetters(2022/9/3)
这一篇博客的内容是在上一篇博客的基础上进行:深入理解Vuex、原理详解、实战应用
@
1、getters的使用
1.1 概念
当state中的数据需要经过加工后再使用时,可以使用getters加工。
1.2 用法
在store.js
中追加getters
配置
const getters = {
bigSum(state){
return state.sum * 10
}
}
//创建并暴露store
export default new Vuex.Store({
......
getters
})
1.3 如何读取数据
组件中读取数据:$store.getters.bigSum
2、getters在项目中的实际应用
3、测试效果
4、mapState和mapGetters的引出
4.1 先看之前在组件中取值的方法
4.2 如何优化插值表达式中取值的操作呢?
可以在computed中进行设置,这样插值表达式的内容就可以简写
5、四个map方法的介绍和使用
5.1、mapState方法
用于帮助我们映射state
中的数据为计算属性
- 用法:
computed: {
//借助mapState生成计算属性:sum、school、subject(对象写法)
...mapState({sum:'sum',school:'school',subject:'subject'}),
//借助mapState生成计算属性:sum、school、subject(数组写法)
...mapState(['sum','school','subject']),
},
5.2、mapGetters方法
用于帮助我们映射getters
中的数据为计算属性
- 用法:
computed: {
//借助mapGetters生成计算属性:bigSum(对象写法)
...mapGetters({bigSum:'bigSum'}),
//借助mapGetters生成计算属性:bigSum(数组写法)
...mapGetters(['bigSum'])
},
5.3 mapActions方法
用于帮助我们生成与actions
对话的方法,即:包含$store.dispatch(xxx)
的函数
methods:{
//靠mapActions生成:incrementOdd、incrementWait(对象形式)
...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
//靠mapActions生成:incrementOdd、incrementWait(数组形式)
...mapActions(['jiaOdd','jiaWait'])
}
5.4 mapMutations方法
用于帮助我们生成与mutations
对话的方法,即:包含$store.commit(xxx)
的函数
- 用法
methods:{
//靠mapActions生成:increment、decrement(对象形式)
...mapMutations({increment:'JIA',decrement:'JIAN'}),
//靠mapMutations生成:JIA、JIAN(对象形式)
...mapMutations(['JIA','JIAN']),
}
备注:mapActions与mapMutations使用时,若需要传递参数需要:在模板中绑定事件时传递好参数,否则参数是事件对象。
6、在项目中的实际应用
6.1 项目结构
6.2 store/index.js
//该文件用于创建Vuex中最为核心的store
//引入Vuex
import Vuex from 'vuex'
//引入Vue
import Vue from 'vue'
//使用插件
Vue.use(Vuex)
//准备action-- 用于响应组件中的动作
const actions = {
jia(context, value) {
context.commit('JIA', value)
},
jiaOdd(context, value) {
if (context.state.sum % 2) {
context.commit('JIA', value)
}
},
jiaWait(context, value) {
setTimeout(() => {
context.commit('JIA', value)
}, 500);
}
}
//准备mutations-- 用于操作数据(state)
const mutations = {
JIA(state, value) {
state.sum += value
},
JIAN(state, value) {
state.sum -= value
}
}
//准备state--用于存储数据
const state = {
sum: 0,//当前的和,
name: '张三',
address: "广州"
}
//准备getters
const getters = {
bigSum(state) {
return state.sum * 10
}
}
//第一种形式
//创建并且暴露store
export default new Vuex.Store({
actions,
mutations,
state,
getters,
})
//第二种形式
// //创建store
// const store = new Vuex.Store({
// actions,
// mutations,
// state,
// })
// //导出store
// export default store
6.3 Count.vue
实际上就是简化代码的操作、之前原始写法保留、比较参考
<template>
<div>
<h1>当前求和为:{{ sum }}</h1>
<h2>当前求和扩大十倍为:{{ bigSum }}</h2>
<h3>你好,{{ name }}在{{ address }}工作</h3>
<select v-model.number="n">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<button @click="increment(n)">+</button>
<button @click="decrement(n)">-</button>
<button @click="incrementOdd(n)">当前求和为奇数再加</button>
<button @click="incrementWait(n)">等一等再加</button>
</div>
</template>
<script>
import { mapState, mapGetters, mapActions, mapMutations } from "vuex";
export default {
name: "Count",
data() {
return {
n: 1, //用户选择的数字
};
},
methods: {
/* 自己亲自写的方法
decrement() {
this.$store.commit("JIAN", this.n);
},
increment() {
this.$store.commit("jia", this.n);
},
*/
//借助mapMutations生成对应的方法,方法中会调用commit去联系mutations(对象写法)
...mapMutations({ increment: "JIA", decrement: "JIAN" }),
//借助mapMutations生成对应的方法,方法中会调用commit去联系mutations(数组写法)。方法的调用要改写为JIA(n)
// ...mapMutations(['JIA','JIAN
/*
incrementOdd() {
this.$store.dispatch("jiaodd", this.n);
},
incrementWait() {
this.$store.dispatch("jiaWait", this.n);
},
*/
//借助mapActions生成对应的方法,方法中会调用dispatch去联系actions(对象写法)
...mapActions({ incrementOdd: "jiaOdd", incrementWait: "jiaWait" }),
//借助mapActions生成对应的方法,方法中会调用dispatch去联系actions(数组写法)
// ...mapActions(['jiaOdd','jiaWait'])
},
computed: {
/* 自己写计算属性
sum() {
return this.$store.state.sum;
},
name() {
return this.$store.state.name;
},
address() {
return this.$store.state.address;
},
*/
// 借助mapState生成计算属性,从state中读取数据(对象写法)
// ...mapState({he:'sum',xingming:'name',dizhi:'address'}),
//数组写法
...mapState(["sum", "name", "address"]),
// bigSum() {
// return this.$store.getters.bigSum;
// },
//借助mapGatters生成计算属性,从getters中读取数据,(对象写法)
// ...mapGetters({bigSum:'bigSum'})
//数组写法
...mapGetters(["bigSum"]),
},
};
</script>
<style lang="css">
button {
margin-left: 5px;
}
</style>
6.4 App.vue
<template>
<div>
<Count/>
</div>
</template>
<script>
import Count from './components/Count'
export default {
name:'App',
components:{Count},
}
</script>
6.5 main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
//引入store
import store from './store/index.js'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
render: h => h(App),
beforenCreate() {
Vue.prototype.$bus = this
}
})
7、测试效果(视频展示)
[video(video-E7AS1bh7-1662199116703)(type-csdn)(url-https://live.csdn.net/v/embed/236077)(image-https://video-community.csdnimg.cn/vod-84deb4/88cc32c2509c40ce8879a9fb074824dd/snapshots/f0779060781c49858d2222148b714ec5-00003.jpg?auth_key=4815643083-0-0-743d2b21cb5e7a8171735f62f6e37491)(title-vuex)]
Vue学习之--------深入理解Vuex之getters、mapState、mapGetters(2022/9/3)的更多相关文章
- Vue学习之--------深入理解Vuex之模块化编码(2022/9/4)
在以下文章的基础上 1.深入理解Vuex.原理详解.实战应用:https://blog.csdn.net/weixin_43304253/article/details/126651368 2.深入理 ...
- Vue学习之--------深入理解Vuex之多组件共享数据(2022/9/4)
在上篇文章的基础上:Vue学习之--------深入理解Vuex之getters.mapState.mapGetters 1.在state中新增用户数组 2.新增Person.vue组件 提示:这里使 ...
- Vue学习之--------深入理解Vuex、原理详解、实战应用(2022/9/1)
@ 目录 1.概念 2.何时使用? 3.搭建vuex环境 3.1 创建文件:src/store/index.js 3.2 在main.js中创建vm时传入store配置项 4.基本使用 4.1.初始化 ...
- vue学习【四】vuex快速入门
大家好,我是一叶,今天我们继续踩坑.今天的内容是vuex快速入门,页面传值不多的话,不建议vuex,直接props进行父子间传值就行,使用vuex就显得比较臃肿. 我们先预览一下效果,如图1所示. 图 ...
- 理解Vuex的辅助函数mapState, mapActions, mapMutations用法
在讲解这些属性之前,假如我们项目的目录的结构如下: ### 目录结构如下: demo1 # 工程名 | |--- dist # 打包后生成的目录文件 | |--- node_modules # 所有的 ...
- [转]理解Vuex的辅助函数mapState, mapActions, mapMutations用法
原文地址:https://www.cnblogs.com/tugenhua0707/p/9794423.html 在讲解这些属性之前,假如我们项目的目录的结构如下: ### 目录结构如下: demo1 ...
- vuex 的使用 mapState, mapGetters, mapMutations, mapActions
state => 基本数据getters => 从基本数据派生的数据mutations => 提交更改数据的方法,同步!actions => 像一个装饰器,包裹mutation ...
- Vue学习系列(四)——理解生命周期和钩子
前言 在上一篇中,我们对平时进行vue开发中遇到的常用指令进行归类说明讲解,大概已经学会了怎么去实现数据绑定,以及实现动态的实现数据展示功能,运用指令,可以更好更快的进行开发.而在这一篇中,我们将通过 ...
- vue学习笔记(五):对于vuex的理解 + 简单实例
优点:通过定义和隔离状态管理中的各种概念并强制遵守一定的规则,我们的代码将会变得更结构化且易维护.使用vuex来引入外部状态管理,将业务逻辑切分到组件外,可以避免重复的从服务端抓取数据. 详情请参考官 ...
随机推荐
- js Fetch返回数据res.json()报错问题
前言 一直以来在简单的场景中经常使用fetch代替第三方请求库, fetch是JavaScript的原生函数, 简单.高效.快速.稳定.可定制等等诸多优点.一直也是用着很是舒服,直到有一天它竟然报错了 ...
- while,do while,for循环语句
循环语句 循环包含三大语句-----while语句 do while语句 for语句 循环三要素 初始值(初始的变量值) 迭代量(基于初始值的改变) 条件(基于初始值的判断) while语句 var ...
- 关于javascript中this
------------恢复内容开始------------ 1 var number = 5; 2 var obj = { 3 number: 3, 4 fn1: (function () { 5 ...
- C++ UAC 提权 以一个管理员身份运行程序
这里是我编译的和一个测试Demo:http://pan.baidu.com/s/1qWNgC6C 大家如果看我下边的不是很清楚,可以下载这个具体工程: 群:103197177 C++进阶讨论:欢迎喜欢 ...
- dpdk读字节,却触发了两次tlp
在通过vfio框架透传设备到vm中,并且在vm中运行dpdk的驱动. 我们发现,dpdk偶尔的一次pread 2字节,却触发了两次tlp. 原因在于: do_io_rw { else if (fill ...
- DL基础:cs231n assignment 1
cs231n assignment 1 20210804 - 20210808. 目录 cs231n assignment 1 总结 KNN 思想 cross-validation 编程细节 SVM ...
- idea每次换行后光标都跑到最左边问题
最进用idea时发现每次换行之后一段时间光标会自动跑到最左边,默认把我的首行空格删掉了 IDEA版本为:IntelliJ IDEA 2020.2.3 x64
- .NET 7 RC1 正式发布
从年初2 月份发布第一个预览版,经历7个预览版后,Microsoft 西雅图时间9月14日发布了 .NET 7 RC 1:https://devblogs.microsoft.com/dotnet/a ...
- kindeditor获取html内容之终极大法
请允许我哔哔两句,真是难受啊,有问题去百度,结果百了一堆乱七八糟的内容,有头没尾,有尾没头的,搞得我晕头转向,现在把kindeditor获取HTML的终极打法无偿分享出来,这可是我配置查找了一下午的成 ...
- 【疑难杂症】关于pycharm无法安装插件显示网络错误问题
今天实在受不了英文的pycharm了,想着赶紧装个中文的插件,结果插件界面给我说我网络有问题 search results are not loaded check the internet conn ...