黑马程序员技术交流社区

标题: 【西安校区】VueX的使用 [打印本页]
作者: 西安前端组    时间: 2018-5-24 11:00
标题: 【西安校区】VueX的使用
本帖最后由 西安前端组 于 2018-5-18 12:17 编辑

VueX的基本使用
在Vue中，组件是经常使用的东西，组件就相当于将一个特定功能的代码和布局集合在一起，方便下次继续复用。组件中又涉及到子组件、父组件等一系列嵌套的关系，这样造成组件间的传值在复杂的组件结构中将显得非常麻烦，因此应运而生的就是组件之间传值的终极解决方案，VueX
1、vuex的概念
        vuex就是一个仓库，这个仓库是存数据的，存在vuex中的数据可以被项目中的任意一个组件中使用，无论存在多么复杂的组件嵌套结构，vuex中的数据在所有组件中都是可以轻松访问到的，都是共享的。这样就解决了复杂组件关系中，组件之间传值的问题。

2、vuex的使用
最基本的使用如下（需要结合webpack环境）
        cnpm i vuex -S
        import Vuex from "vuex"
        Vue.use(Vuex);
        var store = new Vuex.Store({
                state:{},
                mutations:{},
                getters:{}
        });
        var vm = new Vue({
                el:"#app",
                data:{},
                store:store
        });
3、vuex的细节讲解：
        var store = new Vuex.Store({
                state:{
                        msg:{
                                info:"信息"
                        }
                },
                mutations:{
                        haha(state,arg1){
                        }
                },
                getters:{
                        hehe:function(state){
                                return state.msg.info + "fjaljf"
                        }
                }
        });

        讲解：
(1)、state里面放的就是共享数据，在任意一个组件中，想使用state中的数据通过
                this.$store.state.msg
                注意，通过这个方式，是获取state中的数据
(2)、mutations里面放的是方法，mutations中定义的方法，是用来操作state中所定义的数据
                this.$store.commit("haha");调用在mutations中定义的方法
                注意：
                        a、在mutations中定义的方法，默认带了一个形参state，这个参数就是store中的state
                        通过形参state即可修改数据
                        b、在mutations中定义的方法，除了默认带了形参state之外，最多只能再带一个参数，在调用方法的时候传递这个参数
                        this.$store.commit("haha",参数);
(3)、getters中定义的虽然是方法，但是我们把它当作数据来进行使用，getters中定义的属性主要就是把state中的数据进行包装        之后提供给别人进行使用的
                注意：getters中定义的方法，默认也带了一个形参state，这个参数就是store中的state
                getters:{
                        hehe:function(state){
                                return "加个字符串"+state.msg.info
                        }
                }
                hehe是一个属性，我们在其他地方是把它当作属性来使用的，这个属性可能会依赖state中的数据，当state中的数据发生了改变，那么hehe这个属性的值也会发生改变。
                getters中定义的方法都是需要return一个东西的，而return的这个东西就是hehe这个属性的值。

                        {{this.$store.getters.hehe}}

注：上述代码所写的this.$store是可以在任意一个组件中使用的代码，因此，任意一个组件中都可以使用vuex中存储的数据





欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2