vue中getters的使用与四个map方法的使用方式
更新时间:2024年01月22日 10:42:01 作者:小付学代码
这篇文章主要介绍了vue中getters的使用与四个map方法的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
getters方法的使用
### getters的使用 1. 概念:当state中的数据需要经过加工后再使用时,可以使用getters加工。 2. 在```store.js```中追加```getters```配置 ```js ...... const getters = { bigSum(state){ return state.sum * 10 } } //创建并暴露store export default new Vuex.Store({ ...... getters }) ``` 3. 组件中读取数据:```$store.getters.bigSum```
四个map方法的使用
### 四个map方法的使用 1. <strong>mapState方法:</strong>用于帮助我们映射```state```中的数据为计算属性 ```js computed: { //借助mapState生成计算属性:sum、school、subject(对象写法) ...mapState({sum:'sum',school:'school',subject:'subject'}), //借助mapState生成计算属性:sum、school、subject(数组写法) ...mapState(['sum','school','subject']), }, ``` 2. <strong>mapGetters方法:</strong>用于帮助我们映射```getters```中的数据为计算属性 ```js computed: { //借助mapGetters生成计算属性:bigSum(对象写法) ...mapGetters({bigSum:'bigSum'}), //借助mapGetters生成计算属性:bigSum(数组写法) ...mapGetters(['bigSum']) }, ``` 3. <strong>mapActions方法:</strong>用于帮助我们生成与```actions```对话的方法,即:包含```$store.dispatch(xxx)```的函数 ```js methods:{ //靠mapActions生成:incrementOdd、incrementWait(对象形式) ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'}) //靠mapActions生成:incrementOdd、incrementWait(数组形式) ...mapActions(['jiaOdd','jiaWait']) } ``` 4. <strong>mapMutations方法:</strong>用于帮助我们生成与```mutations```对话的方法,即:包含```$store.commit(xxx)```的函数 ```js methods:{ //靠mapActions生成:increment、decrement(对象形式) ...mapMutations({increment:'JIA',decrement:'JIAN'}), //靠mapMutations生成:JIA、JIAN(对象形式) ...mapMutations(['JIA','JIAN']), } ``` > 备注:mapActions与mapMutations使用时,若需要传递参数需要:在模板中绑定事件时传递好参数,否则参数是事件对象。
承接上一篇的Count.vue,更改插值语法中的{{$store.state.sum}}下边用计算属性来做更改。
<template> <div> <h1>当前求和为:{{sum}}</h1> <h3>当前求和放大10倍为:{{bigSum}}</h3> <h3>我在{{school}},学习{{subject}}</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">+</button> <button @click="decrement">-</button> <button @click="incrementOdd">当前求和为奇数再加</button> <button @click="incrementWait">等一等再加</button> </div> </template> <script> import {mapState,mapGetters} from 'vuex' export default { name:'Count', data() { return { n:1, //用户选择的数字 } }, computed:{ //靠程序员自己亲自去写计算属性 /* sum(){ return this.$store.state.sum }, school(){ return this.$store.state.school }, subject(){ return this.$store.state.subject }, */ //借助mapState生成计算属性,从state中读取数据。(对象写法) // ...mapState({he:'sum',xuexiao:'school',xueke:'subject'}), //借助mapState生成计算属性,从state中读取数据。(数组写法) ...mapState(['sum','school','subject']), /* ******************************************************************** */ /* bigSum(){ return this.$store.getters.bigSum }, */ //借助mapGetters生成计算属性,从getters中读取数据。(对象写法) // ...mapGetters({bigSum:'bigSum'}) //借助mapGetters生成计算属性,从getters中读取数据。(数组写法) ...mapGetters(['bigSum']) }, methods: { increment(){ this.$store.commit('JIA',this.n) }, decrement(){ this.$store.commit('JIAN',this.n) }, incrementOdd(){ this.$store.dispatch('jiaOdd',this.n) }, incrementWait(){ this.$store.dispatch('jiaWait',this.n) }, }, mounted() { const x = mapState({he:'sum',xuexiao:'school',xueke:'subject'}) console.log(x) }, } </script> <style lang="css"> button{ margin-left: 5px; } </style>
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
axios全局注册,设置token,以及全局设置url请求网段的方法
今天小编就为大家分享一篇axios全局注册,设置token,以及全局设置url请求网段的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
Vue.js的指令是以v-开头的,它们作用于HTML元素,指令提供了一些特殊的特性。这篇文章主要介绍了Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on 的相关知识,需要的朋友可以参考下2018-10-10Vue使用Element折叠面板Collapse如何设置默认全部展开
这篇文章主要介绍了Vue使用Element折叠面板Collapse如何设置默认全部展开,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2023-01-01vue2.x中h函数(createElement)与vue3中的h函数详解
h函数本质就是createElement(),h函数其实是createVNode的语法糖,返回的就是一个Js普通对象,下面这篇文章主要给大家介绍了关于vue2.x中h函数(createElement)与vue3中h函数的相关资料,需要的朋友可以参考下2022-12-12
最新评论