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>