import Vue from 'vue'

// 这里引入vuex

import Vuex from 'vuex'

 Vue.use(Vuex)

export default new Vuex.Store({

    // state里面的是全局的属性

    state:{

        num:0,

        price:15,

        name:'葡萄',

        testList:[]

    },

    // mutations里面的是全局的方法 参数state是固定写法 可以获取参数

    // 用这样的方式去调用 this.$store.commit('xxx');

    mutations:{

        add(state){

            state.num++ ;

            console.log(state.num)

        }

    },

    // getters是Vuex里的属性计算参数state是固定写法 可以获取参数

    // 调用方法  this.$store.getters.count

    // Vuex的计算属性,在视图中当变量使用

    // 计算属性依赖一个可变的属性 只要这个属性发生变化 这个函数就会自动执行

    getters:{

        count(state){

            // 返回一个计算好的值

            return state.num*state.price

        }

    },

    // 异步方法 用这样的方式去调用 this.$store.dispatch('xxx');

    actions:{

        testActions(context){

            // context里面包含了state mutations getters actions的方法及属性可以直接调用

            // 执行一些异步的操作或者通用的ajax请求

            setTimeout(()=>{

                context.state.testList = ['大娃','二娃','三娃','四娃','五娃']

            },2000)

        }

    }

})

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

// 把下载好的组件引进要使用的地方

import uniCalendar from '../../components/uni-calendar/uni-calendar.vue';

export default {

    data() {

        return {

            datas: '',

            // 可以值获取到name的值

            name:this.$store.state.name

        };

    },

    // 记得要在components里面去局部注册

    components: {

        uniCalendar

    },

    onReady() {

        this.getajax();

    },

    computed: {

        // 需要在计算属性里面设置

        num() {

            return this.$store.state.num;

        },

        count(){

            return this.$store.getters.count;

        },

        testList(){

            return this.$store.state.testList;

        }

    },

    methods: {

        getajax() {

            uni.request({

                url: 'https://bird.ioliu.cn/weather', //仅为示例，并非真实接口地址。

                data: {

                    city: '北京'

                },

                header: {

                    'custom-header': 'hello' //自定义请求头信息

                },

                success: res => {

                    console.log(res.data);

                    this.datas = res.data.basic.city;

                    console.log(this.datas);

                }

            });

        },

        add() {

            // 这里用this.$store.commit(xxx')去调用方法

            this.$store.commit('add');

        },

        testActions(){

            this.$store.dispatch('testActions');

        }

    }

};

</script>

<style lang="scss">

uni-rate {

    height: 200px;

}

</style>