uni-app学习记录06-Vuex简单使用

import Vue from ‘vue‘
// 这里引入vuex
import Vuex from ‘vuex‘
 
 Vue.use(Vuex)
export defaultnew 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() {
            returnthis.$store.state.num;
        },
        count(){
            returnthis.$store.getters.count;
        },
        testList(){
            returnthis.$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>