VUX
1.mapState
2.mapGetters
3.
4.
当你的操作行为中含有异步操作,比如向后台发送请求获取数据,就需要使用action的dispatch去完成。
其他使用commit即可。
举个例子:
const store = new Vuex.Store({
state: {
count: 10,
numb: 10086
},
getters: {
add: (state) => {
return state.count;
},
},
mutations: {
increment(state,val) {
if(val){
state.count += val;
}else{
state.count += 2;
} },
},
actions: {
actionA({dispatch, commit}) {
return commit('add');
},
increment({commit}) {
return commit('increment')
}
}
}); /* eslint-disable no-new */
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app-box')
使用:
import {mapState,mapActions,mapMutations,mapGetters} from 'vuex'
methods:{
...mapMutations({addNumber:'increment'}),
increment(){
this.$store.dispatch('increment');
}
},
computed: {
...mapState({count:'numb'}),
...mapGetters(['add'])
},
<div class="hello">
<button @click="increment">加+2{{count}}</button>
</div>
<div class="hello">
<button @click="addNumber(5)">加+5{{count}}</button>
</div>
<div class="hello">
<button >{{add}}</button>
</div>
点击+2:store的count+=2
点击+5:store的count+=5
...mapState({count:'numb'}),
意思是this.count=this.$store.state.numb
...mapMutations({addNumber:'increment'}),
意思是之行this的addNumber函数的时候,执行this.$store的mutations的increment的函数
VUX的更多相关文章
- 关于Vue vuex vux 文档
01. vue 链接 http://vuejs.org.cn/guide/ 02. vuex ----->>状态管理模块儿<<------- https://vuex.vue ...
- Vue系列:在vux的popup组件中使用百度地图遇到显示不全的问题
问题描述: 将百度地图封装成一个独立的组件BMapComponent,具体见 Vue系列:如何将百度地图包装成Vue的组件(http://www.cnblogs.com/strinkbug/p/576 ...
- vux 中popup 组件 Mask 遮罩在最上层问题的解决
1. 问题描述:popup弹出层在遮罩层下面的 2.原因:因为滚动元素和mask遮罩层在同一级,vux框架默认把遮罩层放在body标签下的 3.解决方法:更改一下源码,把mask遮罩层放在popup同 ...
- 如何优雅的使用vue+vux开发app -03
如何优雅的使用vue+vux开发app -03 还是一个错误的示范,但是离优雅差的不远了... <!DOCTYPE html> <html> <head> < ...
- VUX 移动前端框架使用文档
VUX 移动前端框架使用文档 https://owlaford.gitbooks.io/vux-mobile-framework/content/index.html
- 如何优雅的使用vue+vux开发app -02
如何优雅的使用vue+vux开发app -02 很明显这又是一个错误的示范,请勿模仿 使用动态组件实现保留状态的路由 <!DOCTYPE html> <html> <he ...
- 如何优雅的使用vue+vux开发app -01
如何优雅的使用vue+vux开发app -01 很明显下面是个错误的示范: <!DOCTYPE html> <html> <head> <title>v ...
- 初次使用 VUX
1. 因为以前没用过vux ,所以还是比较不熟练: 2.项目部署是根据git上的源码改的: 开始:将git上的项目下载或者clone到本地: 001:安装nodejs--> 002:npm in ...
- 使用vue-cli构建多页面应用+vux(三)
上节中,我们成功的将vue-cli改造成了多入口,既然用了上简单的脚手架,那就希望用个合适的UI组件,去搜索了几个以后,最后选择了使用vux 贴上其vux的github地址 https://gith ...
- vux 组件打造手机端项目
其实,我用vux组件的过程是这样的,哇!太方便了!!功能好全!!太简单了!!然后,就各种"跳坑".以下排坑环节. 1.安装vux:cnpm i -S vux; 比较顺利吧. 2 ...
随机推荐
- lua中的字符串操作(模式匹配)
(一). 模式匹配函数在string库中功能最强大的函数是:string.find(字符串查找)string.gsub(全局字符串替换)string.gfind(全局字符串查找)string.gmat ...
- JBuilder+struts一个常见异常
[org.apache.commons.digester.Digester]-[ERROR] Parse Error at line 3 column 22: The content of eleme ...
- Linux下添加FTP账号和服务器、增加密码和用户,更改FTP目录
1. 启动VSFTP服务器 A:cenos下运行:yum install vsftpd B. 登录Linux主机后,运行命令:”service vsftpd start” C. 要让FTP每次开机 ...
- OpenCV——轮廓特征描述
检测出特定轮廓,可进一步对其特征进行描述,从而识别物体. 1. 如下函数,可以将轮廓以多种形式包围起来. // 轮廓表示为一个矩形 Rect r = boundingRect(Mat(contours ...
- JS-过滤敏感词【RegExp】
来自腾讯课堂笔记:https://ke.qq.com/webcourse/index.html#course_id=152997&term_id=100174752&taid=8010 ...
- echarts - 特殊需求实现方案汇总
五分钟上手echarts echarts中 设置x||y轴文案.提示文字等为固定字数,超出显示"..." 关于echarts下钻功能的一些总结.js echarts - 特殊需求实 ...
- google v8引擎常见问题
最近在项目中使用v8来进行扩展,下面简单说一下使用v8过程中遇到的一些问题. v8的多线程调用 最初调研v8的测试代码是单线程的,后来一个项目在多线程中使用,出现了一些问题,后来看到参考3中的才恍 ...
- openstack-networking-neutron(一)---端到端和点到点的理解
本博客已经添加"打赏"功能,"打赏"位置位于右边栏红色框中,感谢您赞助的咖啡. ====本文目的===== 理解搞清楚两个概念: 1.端到端 2.点到点 ...
- XSS 跨站脚本攻击(Cross Site Scripting)
xss表示Cross Site Scripting(跨站脚本攻击),它与SQL注入攻击类似,SQL注入攻击中以SQL语句作为用户输入,从而达到查询/修改/删除数据的目的,而在xss攻击中,通过插入恶意 ...
- Core Data 迁移与版本管理
原文 http://chun.tips/blog/2014/11/28/core-data-ban-ben-qian-yi-jing-yan-zong-jie/ 主题 Core DataiOS开发 ...