组件之间的通讯：vuex状态管理,state,getters,mutations,actons的简单使用（一）

最新推荐文章于 2021-12-13 15:15:24 发布

alkbjewq29891

最新推荐文章于 2021-12-13 15:15:24 发布

阅读量88

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/evaling/p/7291573.html

版权

之前的文章中讲过，组件之间的通讯我们可以用$children、$parent、$refs、props、data。。。

但问题来了，假如项目特别大，组件之间的通讯可能会变得十分复杂。。。

这个时候了我们就用vuex进行组件通讯。

至于什么是vuex,简单的说就是一个状态管理器，它管理着我们所有想要它管理的状态，这也就意味某一状态一经变化，其他使用到这个状态的其他组件中数据也会变化

还是一如既往的我不安装，vue-cli开发环境

使用vuex先要引入vuex,创建一个vues.Store();

vuex.Store({

　　state:{},//状态数据集

getters:{},//公共状态数据集

mutations:{},//主要用于改变状态

actions:{} //是可以解决异步问题

})

1）组件中访问状态数据（this.$store.state.状态名），如果你的状态较少，我们可以直接配合vue的计算属性computed使用

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../lib/vue.js">
        </script>
        <script src="../lib/vuex.js"></script>
    </head>

    <body>
        <div id="app">
            <ul>
                <li v-for="item in unregisteredUsers">{{item.name}}</li>
            </ul>
            <app-registration></app-registration>
            <app-registrations></app-registrations>
        </div>
    </body>

</html>
<script>
    const ch1 = {
        template: `<div>
            <span>这是第一个子组件</span>
            <p>---------------------------------</p>
             <div class="row" v-for="item in users">
                <p>{{item.name}}</p>
                 <button @click="registerUser(item)">registerUser</button>
             </div>
        </div>`,

        //        props:{用了vuex就不需要使用props
        //            registration:Array
        //        },
        computed: {
            users() {
                return this.$store.state.users.filter(user => {
                    return !user.registred;
                });

            }

        },
        methods: {
            registerUser(user) {
                user.registered = true;
                const date = new Date;
                this.$store.state.registrations.push({ userId: user.id, name: user.name, date: date.getMonth() + '/' + date.getDay() });
            }

        }
    };
    const ch2 = {
        template: `<div>
            <span>这是第2个子组件</span>
            <p></p>
            
        </div>`,
        //        props:{
        //            users:Array
        //        },
        //           
    };

    const store = new Vuex.Store({
        state: {
            //填充用于管理状态的共享变量
            registrations: [],
            users: [
                { id: 1, name: 'Max', registered: false },
                { id: 2, name: 'Anna', registered: false },
                { id: 3, name: 'Chris', registered: false },
                { id: 4, name: 'Sven', registered: false }
            ]
        }
    })

    //Vue.use(Vuex);
    var myvue = new Vue({
        el: '#app',
        store,
        computed: {
            unregisteredUsers() {
//                return this.$store.state.users.filter((user) => {
//                    return !user.registered;
//                });
               return this.$store.state.registrations;
            }

        },
        components: {
            appRegistration: ch1,
            appRegistrations: ch2
        }

    });
</script>

2）getters 主要用于对多出使用的数据做集中处理

访问方式：this.$store.getters.状态名;

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../lib/vue.js">
        </script>
        <script src="../lib/vuex.js"></script>
    </head>

    <body>
        <div id="app">
            <ul>
                <li v-for="item in unregisteredUsers">{{item.name}}</li>
            </ul>
            <app-registration></app-registration>
            <app-registrations></app-registrations>
        </div>
    </body>

</html>
<script>
    const ch1 = {
        template: `<div>
            <span>这是第一个子组件</span>
            <p>---------------------------------</p>
             <div class="row" v-for="item in users">
                <p>{{item.name}}</p>
                 <button @click="registerUser(item)">registerUser</button>
             </div>
        </div>`,

        //        props:{用了vuex就不需要使用props
        //            registration:Array
        //        },
        computed: {
            users() {
                return this.$store.state.users.filter(user => {
                    return !user.registred;
                });
            }
        },
        methods: {
            registerUser(user) {
                user.registered = true;
                const date = new Date;
                this.$store.state.registrations.push({ userId: user.id, name: user.name, date: date.getMonth() + '/' + date.getDay() });
            }
        }
    };
    const ch2 = {
        template: `<div>
            <span>这是第2个子组件</span>
            <p>--------没注册的用沪------------</p>
            <ul>
                <li v-for="item in unregistration">{{item.name}}</li>
            </ul>
        </div>`,
        computed:{
            unregistration(){        
                return this.$store.getters.unregisterdUsers;
            }            
        }        
    };

    const store = new Vuex.Store({
        state: {
            //填充用于管理状态的共享变量
            registrations: [],
            users: [
                { id: 1, name: 'Max', registered: false },
                { id: 2, name: 'Anna', registered: false },
                { id: 3, name: 'Chris', registered: false },
                { id: 4, name: 'Sven', registered: false }
            ]
        },
        getters:{
            unregisterdUsers(state){
                return state.users.filter(user=>{
                    return !user.registered;
                });    
            },
            registeredUser(state){
                return state.user.filter(user=>{
                    return user.registered;
                });
            },
            totalregisteration(state){
                return state.registrations.length;
            }
            
            
        }
    })

    //Vue.use(Vuex);
    var myvue = new Vue({
        el: '#app',
        store,
    
        computed: {
        unregisteredUsers() {
                return this.$store.state.users.filter((user) => {
                    return !user.registered;
                });
               return this.$store.state.registrations;
            }

        },
        components: {
            appRegistration: ch1,
            appRegistrations: ch2
        }

    });
</script>

3）如果组件想要改变vuex中状态值，我们需要借助于mutations了、

首先组件自己得定义一个方法，使用this.$store.commit({type:'addNum'，n:n,m:m });触发这个方法，其中n、m是参数

然后要在mutations中定义这个addNum方法

mutations:{//mutations中的函数第一个参数是state
     addNum(state,ob){
        state.count+=ob.n;    
    }            
},

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../lib/vue.js"></script>
        <script src="../lib/vuex.js"></script>
    </head>
    <body>
        <p>
            mutation的作用就是，是的子组件可以请求 修改store中state的数据
        </p>
        
        <div id="app">
            <p>我是父组件中的实例：{{parentdata}}</p>
            
            <first-child></first-child>
            
        </div>
    </body>
</html>
<script>
    //定义一个子组件
    const ch1={
        template:`
        <div>
          <p>你可以进行数据操作,改变store中state的数据:{{varity}}</p>
          
          <button @click="add(varity)"> 点击试试</button>
        </div>
        `,
        computed:{
            varity(){
                return this.$store.state.count;
            }    
        },
        methods:{
            add:function(n){//子组件通过其自己的方法，直接commit,触发mutations中的方法进而改变状态
                //方式一：
                this.$store.commit({
                    type:'addNum',
                    n:n             
                });
                //方式e二：
                //this.$store.commit('addNum',{n:n});
            }
            
        }
    };
    
    
    var store=new Vuex.Store({
        state:{
            count:1,
            users:[{name:'han',age:23},{name:'tom',age:22},{name:'jarry',age:33}],    
        },
        getters:{
                       
        },
        mutations:{//mutations中的函数第一个参数是state
            addNum(state,ob){
                state.count+=ob.n;    
            }            
        },        
    });    
    var myvue=new Vue({
        el:"#app",
        store,
        components:{
            firstChild:ch1,
        },
        computed:{
            parentdata(){
                return this.$store.state.count;               
            }            
        }                        
    });    
</script>

4）actions 用于解决多个函数执行的异步问题，

本质上也是改变状态嘛，我们使用mutations貌似就可以改变状态了，但是不能解决异步的问题，居然mutations能改变状态，那我们在他的基础上加点什么东西是不是就能解决异步的问题呢？没错就是actions,

methods----------------------------------------$store.dispatch------------------------------->actions------------------------------->mutations

[解决异步问题，就是在mutations上多了个ations这个步骤，这样解释只是为了大家更好的接受而已，不一定正确]

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../lib/vue.js"></script>
        <script src="../lib/vuex.js"></script>
    </head>
    <body>
        <p>关于action：
        官方说的是为了解决异步的问题，
        因为mutations中可能有多个无方法接口，同步执行会大大的降低效率，因此我们急切需要一种方法，及action</p>
        <div id="app">
            <first-child></first-child>
        </div>        
    </body>
</html>
<script>        
    const ch1={
        template:`
           <div>
           <p>这是我的第一个组件</p>
           <p> <button @click="adds(num)">通过action进行操作</button>:  <span>{{num}}</span></p>               
           <p> <button @click="add(num)">通过mutations进行操作</button>:<span>{{num}}</span></p>             
           </div>
        `,
        methods:{
            adds:function(n){                 
                //this.$store.dispatch('addCount',n);\n
                this.$store.dispatch({type:'addCount',n:n});
            },
            add:function(n){
                //this.$store.commit('addNum',n);
                this.$store.commit({                    
                    type:'addNum',
                    n:n
                });
            }                        
        },
        computed:{
            num(){
                return this.$store.state.smalldata;
            }            
        }               
    };
    
//    const ch2={
//        template:`
//           <div>
//           <p>这是我的第二个组件</p>
//           <span>{{}}</span>
//           </div>
//        `,
//        
//    };
//      
    const store=new Vuex.Store({
        state:{
            smalldata:1,        
        },
        getters:{},
        mutations:{
            addNum(state,obj){
                state.smalldata+=obj.n;        
            }          
        },
        actions:{
//          addCount(co,n){
//              co.commit('addNum',n);
//          },
            addCount({commit},obj){
                commit('addNum',obj);                
            }            
        },              
    });
    const myvue=new Vue({
        el:'#app',
        store,
        components:{
            firstChild:ch1,
            //secondChild:ch2,
        }        
    });
</script>

转载于:https://www.cnblogs.com/evaling/p/7291573.html

alkbjewq29891

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
组件之间的通讯：vuex状态管理,state,getters,mutations,actons的简单使用（一）

之前的文章中讲过，组件之间的通讯我们可以用$children、$parent、$refs、props、data。。。但问题来了，假如项目特别大，组件之间的通讯可能会变得十分复杂。。。这个时候了我们就用vuex进行组件通讯。至于什么是vuex,简单的说就是一个状态管理器，它管理着我们所有想要它管理的状态，这也就意味某一状态一经变化，其他使用到这个状态的其他组件中数据也会变化...
复制链接

扫一扫