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的更多相关文章

  1. 关于Vue vuex vux 文档

    01. vue 链接 http://vuejs.org.cn/guide/ 02. vuex  ----->>状态管理模块儿<<------- https://vuex.vue ...

  2. Vue系列:在vux的popup组件中使用百度地图遇到显示不全的问题

    问题描述: 将百度地图封装成一个独立的组件BMapComponent,具体见 Vue系列:如何将百度地图包装成Vue的组件(http://www.cnblogs.com/strinkbug/p/576 ...

  3. vux 中popup 组件 Mask 遮罩在最上层问题的解决

    1. 问题描述:popup弹出层在遮罩层下面的 2.原因:因为滚动元素和mask遮罩层在同一级,vux框架默认把遮罩层放在body标签下的 3.解决方法:更改一下源码,把mask遮罩层放在popup同 ...

  4. 如何优雅的使用vue+vux开发app -03

    如何优雅的使用vue+vux开发app -03 还是一个错误的示范,但是离优雅差的不远了... <!DOCTYPE html> <html> <head> < ...

  5. VUX 移动前端框架使用文档

    VUX 移动前端框架使用文档 https://owlaford.gitbooks.io/vux-mobile-framework/content/index.html

  6. 如何优雅的使用vue+vux开发app -02

    如何优雅的使用vue+vux开发app -02 很明显这又是一个错误的示范,请勿模仿 使用动态组件实现保留状态的路由 <!DOCTYPE html> <html> <he ...

  7. 如何优雅的使用vue+vux开发app -01

    如何优雅的使用vue+vux开发app -01 很明显下面是个错误的示范: <!DOCTYPE html> <html> <head> <title>v ...

  8. 初次使用 VUX

    1. 因为以前没用过vux ,所以还是比较不熟练: 2.项目部署是根据git上的源码改的: 开始:将git上的项目下载或者clone到本地: 001:安装nodejs--> 002:npm in ...

  9. 使用vue-cli构建多页面应用+vux(三)

    上节中,我们成功的将vue-cli改造成了多入口,既然用了上简单的脚手架,那就希望用个合适的UI组件,去搜索了几个以后,最后选择了使用vux 贴上其vux的github地址  https://gith ...

  10. vux 组件打造手机端项目

    其实,我用vux组件的过程是这样的,哇!太方便了!!功能好全!!太简单了!!然后,就各种"跳坑".以下排坑环节. 1.安装vux:cnpm i -S vux;   比较顺利吧. 2 ...

随机推荐

  1. lua中的字符串操作(模式匹配)

    (一). 模式匹配函数在string库中功能最强大的函数是:string.find(字符串查找)string.gsub(全局字符串替换)string.gfind(全局字符串查找)string.gmat ...

  2. JBuilder+struts一个常见异常

    [org.apache.commons.digester.Digester]-[ERROR] Parse Error at line 3 column 22: The content of eleme ...

  3. Linux下添加FTP账号和服务器、增加密码和用户,更改FTP目录

    1. 启动VSFTP服务器 A:cenos下运行:yum  install  vsftpd B. 登录Linux主机后,运行命令:”service vsftpd start” C. 要让FTP每次开机 ...

  4. OpenCV——轮廓特征描述

    检测出特定轮廓,可进一步对其特征进行描述,从而识别物体. 1. 如下函数,可以将轮廓以多种形式包围起来. // 轮廓表示为一个矩形 Rect r = boundingRect(Mat(contours ...

  5. JS-过滤敏感词【RegExp】

    来自腾讯课堂笔记:https://ke.qq.com/webcourse/index.html#course_id=152997&term_id=100174752&taid=8010 ...

  6. echarts - 特殊需求实现方案汇总

    五分钟上手echarts echarts中 设置x||y轴文案.提示文字等为固定字数,超出显示"..." 关于echarts下钻功能的一些总结.js echarts - 特殊需求实 ...

  7. google v8引擎常见问题

    最近在项目中使用v8来进行扩展,下面简单说一下使用v8过程中遇到的一些问题.   v8的多线程调用 最初调研v8的测试代码是单线程的,后来一个项目在多线程中使用,出现了一些问题,后来看到参考3中的才恍 ...

  8. openstack-networking-neutron(一)---端到端和点到点的理解

    本博客已经添加"打赏"功能,"打赏"位置位于右边栏红色框中,感谢您赞助的咖啡. ====本文目的===== 理解搞清楚两个概念: 1.端到端    2.点到点  ...

  9. XSS 跨站脚本攻击(Cross Site Scripting)

    xss表示Cross Site Scripting(跨站脚本攻击),它与SQL注入攻击类似,SQL注入攻击中以SQL语句作为用户输入,从而达到查询/修改/删除数据的目的,而在xss攻击中,通过插入恶意 ...

  10. Core Data 迁移与版本管理

    原文  http://chun.tips/blog/2014/11/28/core-data-ban-ben-qian-yi-jing-yan-zong-jie/ 主题 Core DataiOS开发 ...