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

安装：

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()方法，父组件代码如下：

  <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

比如子组件原来是这样：

    <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>
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 196,099评论 5赞 462
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 82,473评论 2赞 373
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 143,229评论 0赞 325
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 52,570评论 1赞 267
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 61,427评论 5赞 358
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 46,335评论 1赞 273
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 36,737评论 3赞 386
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 35,392评论 0赞 254
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 39,693评论 1赞 294
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,730评论 2赞 312
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,512评论 1赞 326
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,349评论 3赞 314
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 37,750评论 3赞 299
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,017评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,290评论 1赞 251
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 41,706评论 2赞 342
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 40,904评论 2赞 335

推荐阅读更多精彩内容

  • vuex最简单、最详细的入门文档
    如果你在使用 vue.js , 那么我想你可能会对 vue 组件之间的通信感到崩溃 。 我在使用基于 vue.js...
    yichen_china阅读 370评论 0赞 0
  • 分享一篇好的vuex简单、入门文档
    如果你在使用 vue.js , 那么我想你可能会对 vue 组件之间的通信感到崩溃 。 我在使用基于 vue.js...
    Brighten_Sun阅读 5,273评论 6赞 21
  • vuex入门详解
    vuex最简单、最详细的入门文档 vuex最简单、最详细的入门文档 如果你在使用 vue.js , 那么我想你可能...
    MJ_e9a5阅读 665评论 0赞 7
  • vuex入门文档
    如果你在使用 vue.js , 那么我想你可能会对 vue 组件之间的通信感到崩溃 。 我在使用基于 vue.js...
    Sun____阅读 301评论 0赞 2
  • vuex入门文档
    如果你在使用 vue.js , 那么我想你可能会对 vue 组件之间的通信感到崩溃 。 我在使用基于 vue.js...
    笑得好傻阅读 346评论 0赞 10