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