vuex中关于mapState,mapGetters,mapMutations,mapActions的作用
来源:互联网 发布:c语言编程好的小程序 编辑:程序博客网 时间:2024/06/06 12:58
在开始接触vuex框架的时候对那些state,action,mutation,getter等理解的还挺顺利的,然后突然出来一种加了一个前缀的mapState等,这样的就有点蒙圈了。。。特别是官方的文档并没有给除详细的说明跟例子。。。然后就自己慢慢理解了一下。其实也就是一个重命名而已。。。以下就是例子,希望能帮助理解:
在store中代码
import Vuex from 'vuex'import Vue from 'vue'Vue.use(Vuex);const store = new Vuex.Store({ state: { count: 10, numb: 10086 }, getters: { add: (state, getter) => { state.count = getter.add; return state.count; }, }, mutations: { increment(state,){ state.count += 2; }, }, actions: { actionA({ dispatch, commit }) { return commit('add'); }, }});export default store;
在调用的模块里面的代码如下:
<template> <div class="hello"> <button @click="increment">加{{count}}</button> </div></template><script> import {mapState,mapActions} from 'vuex' export default { name: 'hello', data () { return { msg: 'Welcome to Your Vue.js App' } }, methods:{ increment(){ this.$store.dispatch('incrementsync').then(() => { console.log('then'); }); } }, computed: mapState({ // mapState相当于映射 count: 'numb', //这个时候count应该等于多少?!! 是等于store文件里面的count呢还是等于numb?答案是等于numb!这边的意思是mapState把'numb'的值映射给了count,所以count等于10086 }) }</script>这个时候按钮应该显示加10还是显示加10086?答案是加10086,所以map其实就是一个在store文件中的映射而已,就是不用让你要调用一个值需要敲这么多代码:this.$state.count;而只需要用count。。。
界面效果:
好了,其他的mapAction,mapMutations的原理是一样样的
0 0
- vuex中关于mapState,mapGetters,mapMutations,mapActions的作用
- vuex中关于mapState,mapGetters,mapMutations,mapActions的作用
- vuex中mapState、mapGetters、mapActions、mapMutations的使用
- vuex2中使用mapMutations/mapActions/mapGetters报错解决方法
- webpack打包 vuex ...mapMutations ,...mapGetters报错解决
- vuex中的babel编译mapGetters/mapActions报错解决方法
- 记一次vuex的mapGetters无效原因
- vuex的辅助函数mapState前面的那三个点--对象展开运算符
- vuex namespaced的作用
- nuxt中vuex的使用
- 关于Flux,Vuex,Redux的思考
- 第十一章:关于VUEX的详解
- Vuex中mutations和actions的区别
- 关于php中类的作用
- 关于Delphi中Interface的作用
- 关于Java中环境变量的作用
- 关于Java中Class.forName()的作用
- 关于#include<iomanip> 中iomanip的作用
- 金明的预算方案 (变形01背包)
- React-native 下拉弹框选择(根据网上省 市 区插件改写)
- Python 爬虫入门(三) HTTP协议请求方式
- Linux入门
- lua内置函数读写文件
- vuex中关于mapState,mapGetters,mapMutations,mapActions的作用
- JAVA基础
- appcompat误删后无法生产R.java
- Hive vs. HBase
- 如何利用eclipse在项目中找到某段代码的出现位置?
- 3月15 开始记录学习前端那些事
- 《将博客搬至CSDN》
- 使用 dbms_file_transfer 方式测试增量传输表空间XTTS
- MongoDB shell操作