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

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")
            )
        }
    }
});
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1.什么是状态: 可以理解为在data中的属性需要分享给其他vue组件使用的部分,就叫做状态。简单的说就是data...
    JLong阅读 4,801评论 0 0
  • vuex是一个状态管理模式,通过用户的actions触发事件,然后通过mutations去更改数据(你也可以说状态...
    Ming_Hu阅读 6,081评论 3 3
  • 上一章总结了 Vuex 的框架原理,这一章我们将从 Vuex 的入口文件开始,分步骤阅读和解析源码。由于 Vuex...
    你的肖同学阅读 5,753评论 3 16
  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 13,794评论 1 32
  • R:职业生涯中的长远梦想及短期目标 选自《向前一步》P59我也相信每个人都应该有一个长远的梦想,我也相信每个人都应...
    豆妈成长阅读 1,586评论 2 1