满邻私房菜-小程序之开篇

1.模版方法使用

这是一个模版方法，使用<wxs>封装

<wxs module=“timeHelper” lang=“babel”>
    const getStoreHour = ( t1,t2) => {
      let date1 = getDate(t1);
      let date2 = getDate(t2);
      return `${date1.getHours()}- ${date2.getHours()}`;
    }
    module.exports.getStoreHour = getStoreHour;
</wxs>

可以声明一个方法，这个方法可以在直接在模版<template>中使用，使用方法是“模块名.方法”。

适用于要对服务器传回的数据进行加工处理的，比如服务器传回

meal: {
  provideFromTime: new Date(0312312),
  provideTillTime: new Date(1230123)
}

需要在模板中显示meal的供应时间

<template>
<h4>
{{timeHelper.getStoreHour(meal.provideFromTime, meal.provideTillTime)}}
</h4>
</template>

2. Mixin

可用于抽离页面公共方法和属性，起到了简化页面的和封装代码的作用。Mixin本身是个包含data, methods和created的全局对象。

Mixin使用方法

//page.js
//首先声明并注入“混入toggleMixin”
import toggleMixin from '../mixins/toggle'
 wepy.page({
    mixins: [toggleMixin]
})

//toggle.js
//toggle就是“混入”
//包含一个属性isShowing
//和一个方法toggleShow()
export default {
    data: {
        mixin: 'ToggleMixin',
        isShowing: false
    },
    methods : {
        toggleShow(){
            this.isShowing = !this.isShowing;
        }
    }
}

//page.js
//使用混入的方法就是直接在模板里使用
<template>
    <button @click="toggleShow"></button>
    <tooltip v-if="isShowing" class="tooltip">
        <p>I am a title in tooltip</p>
    </tooltip>
</template>

3.Store

Store是Vuex的一个核心概念，是存储Model的一个全局单例，包括state(数据),mutations(封装写数据的方法),getters(封装获取数据的方法)和actions(调用mutations的方法，可以异步，一般用于实现业务), module(分离Store，适合于每个子Store都有自己的逻辑和数据的情况，如DishList和Cart)

举例：现在页面是一个菜单页，包含一个由菜式（Dish）组成的列表，用户可以添加菜式到购物车和checkout。

如何实现这个Store呢？

import Vuex from ‘@wepy/x’;

//总的Store分为两个子模块(submodule)，一个是菜式列表（用于存储在菜单里的菜式），一个是购物车列表（用于存储购物车里的菜式）
export default new Vuex.Store({
    modules: {
        dishList : DishList,
        cart: Cart
    },
    getters: {
        getDishById( state, id ){
            return state.getters.getDishById(id)
        }
    }
});

//菜单列表Store，包括数据菜单列表和方法添加新菜式
export default new Vuex.Store({
    state: {
        dishes : [{
            id: “0001”,
            title: “韭菜盒子”,
            price: 9.98,
            desc: “山东妈妈的韭菜盒子”,
            photos: [“1.jpg”,”2.jpg”],
            preferences : {
                “口味” : [“正常”,”重口味"]
            }
        },{
            id: “0002”,
            title: “豆乳盒子”,
            price: 18.98,
            desc: “John的甜品屋招牌”,
            photos: [“1.jpg”,”2.jpg”],
            preferences : {
                “口味” : [“奶油”,”草莓"]
            }] 
    },
    mutations: {
        addDishesToList (state, newDishes) {
            state.dishes.push(newDishes);
        }
    },
    getters: {
        getDishesList (state) {
            return state.dishes;
        },
        getDishById (id){
            return state.dishes.filter( d => d.id === id)[0];
        }
    },
    actions: {
        getMoreDishes (context) {
            let newDishes = await getNewDishes();
            context.commit(“addDishesToList”, newDishes);
        }
    }
});


//Cart，购物车列表Store，包括购物车菜单列表和方法添加进购物车，清空购物车和结账
export default new Vuex.Store({
    state: {
        dishes : [] 
    },
    mutations: {
        addDishToCart (state, dish) {
            state.dishes.push(dish)
        },
        removeDishFromCart (state, dishId){
            state.dishes.remove(dishId)
        },
        clearCart ( state) {
            states.dishes = []
        }
    },
    getters: {
        getCart (state) {
            return state.dishes;
        }
    },
    actions: {
        addDishToCart ( { dispatch, commit, getters, rootGetters}, dishId ) {
            let dish = rootGetters.getDishById(dishId)
            commit(‘addDishesToCart’, dish)
        },
        removeDishFromCart  ( { dispatch, commit, getters, rootGetters}, dishId ) {
            commit(‘removeDishFromCart’, dishId)
        },
        checkout ( { dispatch, commit, state }){
            const dishesInCart = […state.dishes]
            commit(“clearCart”)
           shop.buy(
                dishesInCart,
                () => commit(“checkoutSuccess"), 
                () => commit("checkoutFailure")
            )
        }
    }
});