uni-app learning record 06-Vuex simple to use

Vue from Import 'VUE'
 // incorporated herein vuex 
Import from Vuex 'vuex' 
 
 Vue.use (Vuex) 
Export default  new new Vuex.Store ({
     // State which is global attributes 
    State: { 
        NUM: 0 , 
        . price: 15 , 
        name: 'grapes' , 
        testlist: [] 
    }, 
    // mutations which method is global state parameter acquisition parameters may be fixed wording 
    // . in this manner calls to this $ store.commit ( 'xxx') ; 
    mutations: { 
        the Add (State) { 
            state.num ++ ; 
            the console.log (state.num) 
        } 
    }, 
    //Vuex getters are in the state attribute calculation parameters are fixed parameters can be retrieved wording 
    // call the method the this. store.getters.count $ 
    @ Vuex calculated property, when the variables in the view 
    // calculate a property dependent variable property As long as the property change function is performed automatically 
    getters: { 
        COUNT (State) { 
            // return a value computed 
            return state.num * state.price 
        } 
    }, 
    // asynchronous method in such a way to call this. store.dispatch $ ( 'XXX'); 
    Actions: { 
        testActions (context) { 
            // context contains methods and attributes which state mutations getters actions may be called directly 
            // perform some operation or universal asynchronous ajax request 
            the setTimeout (( ) => { 
                context.state.testList= [ 'Big baby', 'Erwa', 'three baby', 'four baby', 'five baby' ] 
            }, 2000 ) 
        } 
    } 
})

html

<template>
    <view>
        <view>{{ datas }}</view>
        <view>数量:{{ num }}</view>
        <view>{{ name }}</view>
        <view>总价:{{count}}</view>
        <button type="primary" @click="add">add</button>
        <button type="primary" @click="testActions">testActions</button>
        <view>
            <view v-for="(item,index) in testList" :key='index'>
                {{item}}
            </view>
        </view>
        <!-- <view>
            <uni-calendar 
            :insert="true"
            :lunar="true" 
            :disable-before="true" 
            :start-date="'2019-3-2'"
            :end-date="'2019-5-20'"
            @change="change"
             ></uni-calendar>
        </view> -> 
    </ View > 
</ Template > 

< Script > 
// place to download a good introduction to the components used 
Import uniCalendar from ' ../../components/uni-calendar/uni-calendar.vue ' ; 

Export default { 
    Data () { 
        return { 
            DATAS: '' ,
             // can name value value acquired 
            name: the this $ store.state.name. 
        }; 
    }, 
    // remember to register to the local components inside 
    components: { 
        uniCalendar 
    }, 
    the onReady () {
        the this .getajax (); 
    },
    computed: { 
                         data: {// need to calculate the property disposed inside 
        NUM () {
             return  the this $ store.state.num;. 
        }, 
        COUNT () { 
            return  the this $ store.getters.count;. 
        }, 
        testlist () { 
            return  the this . store.state.testList $; 
        } 
    }, 
    Methods: { 
        getajax () { 
            uni.request ({ 
                URL: ' https://bird.ioliu.cn/weather ' , // merely exemplary, the interface is not a real address.

                    City: ' Beijing ' 
                }, 
                header: { 
                    ' Custom-header ' : ' Hello '  // custom request header information 
                }, 
                Success: RES => { 
                    the console.log (res.data); 
                    the this .datas = res.data .basic.city; 
                    the console.log ( the this .datas); 
                } 
            }); 
        }, 
        the Add () { 
            // . here with this $ store.commit (xxx ') method to call 
            the this . $ store.commit ( ' the Add ' ); 
        }, 
        testActions () { 
            the this.$store.dispatch('testActions');
        }
    }
};
</script>

<style lang="scss">
uni-rate {
    height: 200px;
}
</style>