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;
    }
}

/*三、優勢相似計算屬性   ，  改變state裏面的count數據的時候會觸發 getters裏面的方法 獲取新的值 (基本用不到)*/


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



/*
四、 基本沒有用

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>