标签：list state incCount State Getter Mutation var vuex store

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);


/*1.state在vuex中用于存储数据*/
var state={

    count:1,
    list:[]
}

/*2.mutations里面放的是方法，方法主要用于改变state里面的数据
*/
var mutations={

    incCount(){

        ++state.count;
    },
    addList(state,data){

        state.list = data;
    }
}

/*3、优点类似计算属性   ，  改变state里面的count数据的时候会触发 getters里面的方法 获取新的值 (基本用不到)*/


var getters= {
   
    computedCount: (state) => {
        return state.count*2
    }
}



/*
4、 基本没有用

Action 类似于 mutation，不同在于：

Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。
*/


var actions= {
    incMutationsCount(context) {    /*因此你可以调用 context.commit 提交一个 mutation*/
      
      
        context.commit('incCount');    /*执行 mutations 里面的incCount方法 改变state里面的数据*/


    }
}



//vuex  实例化 Vuex.store   注意暴露
const store = new Vuex.Store({
    state,
    mutations,
    getters,
    actions
})


export default store;

<template>
    <!-- 所有的内容要被根节点包含起来 -->
    <div id="home" style="padding:20px;">    
       我是首页组件  -- {{this.$store.state.count}} ----{{this.$store.getters.computedCount}}

               
        <button @click="incCount()">增加数量+</button>
        
       
    </div>
</template>


<script>

    //1. 引入store   建议store的名字不要变

    import store from '../vuex/store.js';

    //2.注册
    export default{
        data(){
            return {               
                msg:'我是一个home组件',
                value1: null,
             
            }
        },
        store,
        methods:{
            incCount(){
                //改变vuex store里面的数据

                //this.$store.commit('incCount');   /*触发 mutations 改变 state里面的数据*/

                this.$store.dispatch('incMutationsCount');   /*触发 actions里面的方法   */
            }
        }
    }

</script>

<style lang="scss" scoped>
    
</style>

<template>    
    <div id="news">    
       我是新闻组件   --{{this.$store.state.count}}



        
        <br>

        <button @click="incCount()">增加数量</button>

                <br><br>
                <br><br>

                <ul>
                    <li v-for="item in list">
                    
                        {{item.title}}
                    </li>
                </ul>

                        
    </div>

</template>


<script>
    //1. 引入store

    import store from '../vuex/store.js';

    export default{
        data(){
            return {               
               msg:'我是一个新闻组件',
               list:[]
              
            }
        },
        store,
        methods:{

            incCount(){

                this.$store.commit('incCount');
            },

            requestData(){

                  //请求数据

                    var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';


                    this.$http.get(api).then((response)=>{
                        console.log(response);

                        //注意this指向

                        this.list=response.body.result;

                        //数据放在store里面

                        this.$store.commit('addList',response.body.result);



                    },function(err){

                            console.log(err);

                    })
            }
        },mounted(){


            //判断 store里面有没有数据
            var listData=this.$store.state.list;

            console.log(listData.length);

            if(listData.length>0){
                    this.list=listData;

            }else{

                 this.requestData();

            }

        }
    }

</script>





<style lang="scss" scoped>
    
    .list{

        li{
            height:3.4rem;

            line-height:3.4rem;

            boder-bottom:1px solid #eee;

            font-size:1.6rem;

            a{

                color:#666;

                
            }
        }
    }

</style>

标签：list,state,incCount,State,Getter,Mutation,var,vuex,store
来源： https://www.cnblogs.com/loaderman/p/11058619.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。