vuex 的使用 mapState, mapGetters, mapMutations, mapActions
state => 基本数据
getters => 从基本数据派生的数据
mutations => 提交更改数据的方法,同步!
actions => 像一个装饰器,包裹mutations,使之可以异步。
modules => 模块化Vuex
export default{
state: {
count:5
},
getters: {
// 单个参数
countDouble: function(state){
return state.count * 2
},
// 两个参数
countDoubleAndDouble: function(state, getters) {
return getters.countDouble * 2
}
},
mutations: {
//无提交荷载
increment(state) {
state.count++
}
//提交荷载
incrementN(state, obj) {
state.count += obj.n
}
},
actions: {
increment (context) {
setInterval(function(){
context.commit('increment')
}, 1000)
}
}
<template>
<div class="p-genDan">
<p>{{ $store.state.count }}</p><!--state第一种使用方法,直接使用-->
<p>{{ count }}</p> <!--state第二种方式-->
</div>
</template>
<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';
export default {
name: 'genDan',
data() {
return {};
},
beforeCreate() {},
created() {},
beforeMount() {},
mounted() {
//mutations调用 第一种形式
//无提交荷载
this.$store.commit('increment')
//提交荷载
this.$store.commit('incrementN', {n: 100})
//对象风格的提交方式
this.$store.commit({ type: 'incrementN', n: 10}) //mutations调用 第二种形式
this.increment();
this.add(); //Action 通过 store.dispatch 方法触发:
this.$store.dispatch('increment')
// 以载荷形式分发
this.$store.dispatch('incrementN', {n: 10})
// 以对象形式分发
this.$store.dispatch({type: 'incrementN',n: 10})
//Action通过 mapActions
this.incrementN();
},
computed: {
...mapState({
tabView:state => state.selfCenter.moneyManageTabView, //调用子模块selfCenter的state
count: state => state.count, //state第二种使用方法
// 传字符串参数 'count' 等同于 `state => state.count`
countAlias: 'count',
// 为了能够使用 `this` 获取局部状态,必须使用常规函数
countPlusLocalState (state) { //state的重新筛选,当前组件有效
return state.count + 10
}
}),
//getters调用第一种调用方式
countDouble: function(){
return this.$store.getters.countDouble
},
countDoubleAndDouble: function(){
return this.$store.getters.countDoubleAndDouble
},
//getters第二种调用方式
//使用对象展开运算符将 getters 混入 computed 对象中
...mapGetters([
'countDouble',
'countDoubleAndDouble',
//如果你想将一个 getter 属性另取一个名字,使用对象形式: 映射 this.double 为 store.getters.countDouble
double: 'countDouble'
//..
]),
...mapGetters('selfCenter',['oneWeekBetTotal','oneWeekBetEcharts']), //调用子模块selfCenter中getters
},
methods: { //mutations调用 第二种形式
...mapMutations('selfCenter',['changeMoneyManageTabView']), //调用子模块selfCenter
...mapMutations([
'increment' // 映射 this.increment() 为 this.$store.commit('increment')
]),
...mapMutations({
add: 'increment' // 映射 this.add() 为 this.$store.commit('increment')
}), //mapActions
...mapActions([
'incrementN' //映射 this.incrementN() 为 this.$store.dispatch('incrementN')
]),
...mapActions({
add: 'incrementN' //映射 this.add() 为 this.$store.dispatch('incrementN')
})
},
beforeUpdate() {},
updated() {},
beforeDestroy() {},
destroyed() {}
};
</script>
vuex 的使用 mapState, mapGetters, mapMutations, mapActions的更多相关文章
- mapState ,mapGetters ,mapMutations,mapActions
参考 http://www.imooc.com/article/14741
- vuex mapState、mapGetters、mapActions、mapMutations的使用
例子: index.js import Vue from 'vue' import Vuex from 'vuex' import mutations from './mutations' impor ...
- vuex之 mapState, mapGetters, mapActions, mapMutations 的使用
一.介绍 vuex里面的四大金刚:State, Mutations,Actions,Getters (上次记得关于vuex笔记 http://www.cnblogs.com/adouwt/p/8283 ...
- vue:vuex中mapState、mapGetters、mapActions辅助函数及Module的使用
一.普通store中使用mapState.mapGetters辅助函数: 在src目录下建立store文件夹: index.js如下: import Vue from 'vue'; import ...
- 关于mapState和mapMutations和mapGetters 和mapActions辅助函数的用法及作用(四)-----mapActions
介绍mapActions辅助函数: Action提交的是Mutation,不能够直接修改state中的状态,而Mutations是可以直接修改state中状态的:Action是支持异步操作的,而Mut ...
- vuex里mapState,mapGetters使用详解
这次给大家带来vuex里mapState,mapGetters使用详解,vuex里mapState,mapGetters使用的注意事项有哪些,下面就是实战案例,一起来看一下. 一.介绍 vuex里面的 ...
- vuex中mapState、mapMutations、mapAction的理解
当一个组件需要获取多个状态时候,将这些状态都声明为计算属性会有些重复和冗余.为了解决这个问题,我们可以使用 mapState 辅助函数帮助我们生成计算属性. // 在单独构建的版本中辅助函数为 Vue ...
- Vue 状态管理之vuex && {mapState,mapGetters}
1 # 一.理解vuex 2 1.概念:专门在Vue中实现集中式状态(数据)管理的一个Vue插件,对vue应用中多个组件的共享状态进行集中式的管理(读写),也是一种组件间通信的方式,且适用于任意组件间 ...
- vuex2中使用mapMutations/mapActions报错解决方法 BabelLoaderError: SyntaxError: Unexpected token
在尝鲜vuex2时,发现vuex2增加了 mapGetters 和 mapActions 的方法,借助stage2的 Object Rest Operator 特性,可以写出下面代码:methods: ...
随机推荐
- Java生鲜电商平台-生鲜电商中商品类目、属性、品牌、单位架构设计与实战
Java生鲜电商平台-生鲜电商中商品类目.属性.品牌.单位架构设计与实战 说明:Java生鲜电商平台-生鲜电商中商品类目.属性.品牌.单位架构设计与实战经验分享 凡是涉及到购物,必然是建立在商品的基础 ...
- Python中Pyyaml模块的使用
一.YAML是什么 YAML是专门用来写配置文件的语言,远比JSON格式方便. YAML语言的设计目标,就是方便人类读写. YAML是一种比XML和JSON更轻的文件格式,也更简单更强大,它可以通过缩 ...
- MSG结构
MSG是Windows程序中的结构体,用于保存windows消息,定义: typedef struct tagMSG { HWND hwnd; //该消息所属的窗口句柄 UINT message; / ...
- Spring 框架下的 JDBC
Spring JDBC Spring 对JDBC技术规范做了进一步封装,它又叫Spring JDBCTemplate(jdbc模板技术) 纯JDBC:代码清晰的.效率最高.代码是最烦的. Spr ...
- iviewer插件
jQuery-iviewer插件的使用 iviewer是一个具有缩放和图像旋转功能的图像查看小部件. 在jQuery官网下载后,有很多文件. 直接把文件夹解压拖到项目里. 然后再html中引入主要的文 ...
- leetcode题解:两数之和
给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和为目标值的那 两个 整数,并返回他们的数组下标. 你可以假设每种输入只会对应一个答案.但是,你不能重复利用这个数组中同样的元 ...
- redis实现分布式锁--工具类
1.引入依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId> ...
- 通过pywin32库来上传文件
先来安装:pip install pywin32 辅助定位工具winspy下载地址:https://sourceforge.net/projects/winspyex/ 打开后是这玩意: 按住靶心拖拽 ...
- JS获取url请求参数
JS获取url请求参数,代码如下: // 获取url请求参数 function getQueryParams() { var query = location.search.substring(1) ...
- 01-Vue.js基础
一.Vue基础 1.介绍 Vue是一套用于构建用户界面的渐进式框架.Vue的核心库只关注视图层,不仅容易上手,还便于与第三方库或既有的项目整合.兼容性:Vue 不支持 IE8 及以下版本,因为 Vue ...