我们经常用element-ui做后台管理系统，经常会遇到父组件给子组件传递数据，下面一个简单的例子，点击按钮，把弹框显示变量数据通过子组件的props属性传递，子组件通过$emit事件监听把数据回传给父组件。
父组件代码：
@H_502_12@<template> div> a href="javascript:;" @click="dialogshow = true">点击</acommon-dialog :show.sync="dialogshow"></common-dialog> 弹框是否显示:{{dialogshow}} > > script> import commondialog from '@/components/dialog export default { name: parent,components:{ common-dialog:commondialog },data () { return { dialogshow:false } },methods:{ } } >
子组件代码：
@H_502_12@el-dialog :visible.sync="elDialogShow" title="提示"> span>这是一段弹框信息span slot="footer" class="dialog-footer"> el-button @click="elDialogShow = false">取 消el-buttontype="primary">确 定el-dialog export { name:childrenshow],computed:{ elDialogShow:{ get(){ return this.show },set(value){ .$emit(update:show { }; } } >
感觉这样挺麻烦，父组件通过设置子组件的属性（props）来向子组件传递数据，而父组件想获得子组件的数据，得向子组件注册事件，在子组件触发这个事件再把数据传递出来。一句话总结起来就是，props 向下传递数据，事件向上传递数据。
如果使用vuex，像下面这种方式就很简单：
@H_502_12@<!--父组件--> ="$store.state.show = true" 弹框是否显示:{{$store.state.show}} 子组件="$store.state.show"其它代码省略>
当然，在这儿举这个例子似乎不恰当，只是为了说明vuex使用方便。
安装：
@H_502_12@npm install vuex --save
在main.js添加配置：
@H_502_12@import vuex from 'vuex' Vue.use(vuex) var store = new vuex.Store({ state:{ show:false } }) Vue({ el: '#app' })
然后子组件代码就能有效运行了。
@H_502_12@="$store.state.show = false">
前面我们把store对象写到了main.js中，为了项目的好管理，我们可以新建一个store文件夹放于src文件夹下，在store文件夹下新建index.js,代码如下：
@H_502_12@import Vue from 'vue' import vuex from 'vuex' Vue.use(vuex); export default } })
那么对应的main.js得改成如下：
@H_502_12@//vuex import store from './store' 使用store template: '<App/>'用户基本信息，用户购物车等）放到同一个state下面不好管理，这就用modules。那么store文件夹下的index.js就变成了这样，假如我们有app与user模块：
@H_502_12@import Vue from 'vue' import Vuex from 'vuex' import app from './modules/app' app模块数据 import user from './modules/user' 用户模块数据 import getters from './getters' Vue.use(Vuex) const store = Vuex.Store({ modules: { app,user },getters }) export default storegetters
这儿说明下，上面我在Store实例对象中引入了getters，是为了后面页面可以直接调用经常用到的状态信息，也就相当于vue实例里面的computed计算属性，通过$store.getters.show方式得到相关数据，即通过上面的getters引入知道，是直接在store文件夹下创建了一个getters.js,代码如下：
@H_502_12@const getters = { show: state => state.app.show } export default getters当然这个getters也可以放到具体的模块中，比如放到app模块中，官网的这块代码结构如下：
@H_502_12@const moduleA = { state: { ... },mutations: { ... },actions: { ... },getters: { ... } } const moduleB = Vuex.Store({ modules: { a: moduleA,b: moduleB } }) store.state.a -> moduleA 的状态 store.state.b -> moduleB 的状态我们从index.js中看到，我们在store文件夹下创建了一个modules文件夹，也就是在该文件夹下放各个需要区分的状态模块，比如user.js，app.js等。
结构如下图：
上面我们通过$store.getters.show方式（即相当于通过计算属性）获得show的值，当然也可以通过$store.state.app.show获得。
app.js代码：
@H_502_12@export default { state:{ show: } }mutations
在我们点击按钮出现弹框或者点击弹框中的关闭按钮，需要修改app模块中的show的状态，这时候就需要通过mutations进行修改数据（同步操作）。
我们需要在app.js模块代码：
@H_502_12@export },mutations:{ SET_DIALOG_STATE:(state,val) => { 改变弹框是否显示的状态 state.show = val } } }父组件：
@H_502_12@="$store.commit('SET_DIALOG_STATE',true)" 弹框是否显示:{{$store.state.app.show}} { } },1)">>子组件：
@H_502_12@="$store.getters.show">这儿就是用到了$store.commit('SET_DIALOG_STATE',false)来触发mutations中的SET_DIALOG_STATE方法来改变状态值。
需要注意的是：
- mutations中的方法是不分模块的，比如你在app.js中定义了SET_DIALOG_STATE这个方法，也在user.js中定义了SET_DIALOG_STATE这个方法，那么在任一组件中调用SET_DIALOG_STATE方法。
- mutations里的操作必须是同步的。
如果在mutations 里执行异步操作会发生什么事情,实际上并不会发生什么奇怪的事情,只是官方推荐,不要在 mutations 里执行异步操作而已。
actions
我们在上面的app.js中通过mutations改变了一个状态，那么如果需要改变多个状态的值呢，需要执行mutations中定义的多个方法（也就是说需要调用多次$store.commit（）方法），那么就需要actions
那么app.js代码如需要改成如下：
@H_502_12@export return state.show } },1)"> val } },actions:{ set_dialog_state({commit,state},dialogVal){ 对象解构 commit('SET_DIALOG_STATE'commit('mutations其它方法','其它方法需要改变的值') } 等价于下面的： /* set_dialog_state(context,dialogVal){ context.commit('SET_DIALOG_STATE',dialogVal) context.commit('mutations其它方法','其它方法需要改变的值') } */ } }那么父组件的调用方式就需要用$store.dispatch()方法，父组件代码如下：
@H_502_12@<template> <div> <a href="javascript:;" @click="$store.dispatch('set_dialog_state',true)">点击</a> <common-dialog></common-dialog> 弹框是否显示:{{$store.state.app.show}} </div> </template> <script> import commondialog from '@/components/dialog' export { name: 'parent'代码： @H_502_12@<template> <el-dialog :visible.sync="$store.getters.show" title="提示"> <span>这是一段弹框信息</span> <span slot="footer" class="dialog-footer"> <el-button @click="$store.dispatch('set_dialog_state',false)">取 消</el-button> <el-button type="primary" @click="$store.dispatch('set_dialog_state',false)">确 定</el-button> </span> </el-dialog> </template>这儿就使用$store.dispatch('set_dialog_state',true)来触发actions中的set_dialog_state方法。官方推荐,将异步操作放在 action 中。
mapGetters、mapState、mapMutations、mapActions
很多时候,
$store.state.app.show、$store.dispatch('set_dialog_state',true)这种写法又长又臭,很不方便,我们没使用 vuex 的时候,获取一个状态只需要this.show,执行一个方法只需要this.set_dialog_state就行了,使用 vuex 使写法变复杂了 ?使用
mapState、mapGetters、mapActions就变得简单了。mapGetters
比如子组件原来是这样：
@H_502_12@<template> <el-dialog :visible.sync="$store.getters.show" title="提示"> <span>这是一段弹框信息</span> <span slot="footer" class="dialog-footer"> <el-button @click="$store.dispatch('set_dialog_state',false)">确 定</el-button> </span> </el-dialog> </template>通过$store.getter.show得到状态值，我们也可以这样：
@H_502_12@<template> <el-dialog :visible.sync="show" title="提示"> <span>这是一段弹框信息</span> <span slot="footer" class="dialog-footer"> <el-button @click="$store.dispatch('set_dialog_state',false)">确 定</el-button> </span> </el-dialog> </template> <script> import { mapGetters } from 'vuex' export { name:'children' { }; },computed:{ ...mapGetters([ 'show' ]) } } </script>
mapGetters辅助函数仅仅是将 store 中的 getter 映射到局部计算属性。当然我们也可以给getters里面的状态show换一个名字，比如叫dialogShow,那么子组件就需要改成如下：
@H_502_12@<template> <el-dialog :visible.sync="dialogShow" title="提示"> <span>这是一段弹框信息</span> <span slot="footer" class="dialog-footer"> <el-button @click="$store.dispatch('set_dialog_state',computed:{ ...mapGetters({ dialogShow:'show' }) } } </script>mapState
上面我们通过$store.getters.show拿到状态值，我们也可以通过$store.state.app.show拿到值，那么怎样使用mapState呢？
子组件写法：
@H_502_12@="show"="$store.dispatch('set_dialog_state',1)"> import { mapState } from vuex=> state.app.show }) } } >@H_502_12@="showState" state.app.show,//方式一 箭头函数 showState(state){ 方式二 常规函数 state.app.show } }) } } >mapMutations
你可以在组件中使用
$store.commit('xxx')提交 mutation，或者使用mapMutations辅助函数将组件中的 methods 映射为store.commit调用父组件代码如下：
@H_502_12@="SET_DIALOG_STATE(true)" import { mapMutations } from SET_DIALOG_STATE]) } } >给方法名换个名字：
@H_502_12@="changeState(true)"' 改变名字 }) } } >mapActions
你在组件中使用
$store.dispatch('xxx')分发 action，或者使用mapActions辅助函数将组件的 methods 映射为store.dispatch调用父组件代码：
@H_502_12@="set_dialog_state(true)" import { mapActions } from set_dialog_state>参考地址
猜你在找的Vue相关文章
