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. codeforces水题100道 第三题 Codeforces Beta Round #47 A. Domino piling (math)

    题目链接:http://www.codeforces.com/problemset/problem/50/A题意:一个NxM的举行中最多能放多少个1x2的矩形.C++代码: #include < ...

  2. 【Nginx】服务器中HTTP 301跳转到带www的域名的方法

    从nginx的官方文档 documentation, 正确的nginx https 301跳转到带www域名方法的方法如下: HTTP 301跳转到带www域名方法 需要两个server段. serv ...

  3. shell 数值计算

    shell中的赋值和操作默认都是字符串处理,在此记下shell中进行数学运算的几个特殊方法,以后用到的时候可以来看,呵呵.   1.错误方法举例   a)   var=1+1   echo $var  ...

  4. 【基础】httpclient注意事项

    一.HttpClient有默认的执行器RetryExec,其默认的重试策略是DefaultHttpRequestRetryHandler. RetryExec在执行http请求的时候使用的是底层的基础 ...

  5. 【分享】IT产业中的三大定理(三) —— 反摩尔定理 (Reverse Moore's Law)

    Google(谷歌)的 CEO 埃里克·施密特在一次采访中指出,如果你反过来看摩尔定理,一个 IT 公司如果今天和十八个月前卖掉同样多的.同样的产品,它的营业额就要降一半.IT 界把它称为反摩尔定理. ...

  6. 网狐荣耀平台找不到存储过程 'GSP_GS_LoadGameMatchItem'错误解决

    把RYGameMatchDB的存储过程复制到RYGameScoreDB即可,GSP_GS_InsertGameMatchItem和GSP_GS_DeleteGameMatchItem也一样 由于存储过 ...

  7. sysbench 压力测试工具

    一.sysbench压力测试工具简介: sysbench是一个开源的.模块化的.跨平台的多线程性能测试工具,可以用来进行CPU.内存.磁盘I/O.线程.数据库的性能测试.目前支持的数据库有MySQL. ...

  8. 配置Mac漂亮的Shell--Iterm2+OhMyZSH+Agnoster

    安装包管理器 首先当然是解决包管理的问题,Mac下面是Homebrew的天下了 /usr/bin/ruby -e "$(curl -fsSL https://raw.githubuserco ...

  9. STM8S 低功耗(1)

    STM8S的低功耗模式有4种. 关系如下. 本次使用的停机(HALT) 使用了内部定时器,外部中断,LED指示是否进入低功耗. 在while循环中设置如下 ) { if(!IR_IN) // 外部中断 ...

  10. 传真AT指令部分(参考)

    不知道下面的命令是不是通用的,如果有尝试过的师兄给我个回复!! 列出了您的MODEM能理解的传真 AT 命令.每个命令描述包括命令名称.解释和相关参数. 传真命令 命令 描述 +F<comman ...