Vuex 的使用 State Mutation Getter Action

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>