uni-app學習記錄06-Vuex簡單使用

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

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>
// 把下載好的組件引進要使用的地方
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>