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>中使用，使用方法是“模塊名.方法”。
適用于要對服務(wù)器傳回的數(shù)據(jù)進(jìn)行加工處理的术奖，比如服務(wù)器傳回
meal: {
provideFromTime: new Date(0312312),
provideTillTime: new Date(1230123)
}
需要在模板中顯示meal的供應(yīng)時(shí)間
<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(數(shù)據(jù)),mutations(封裝寫數(shù)據(jù)的方法),getters(封裝獲取數(shù)據(jù)的方法)和actions(調(diào)用mutations的方法唧龄，可以異步，一般用于實(shí)現(xiàn)業(yè)務(wù)), module(分離Store奸远，適合于每個子Store都有自己的邏輯和數(shù)據(jù)的情況既棺，如DishList和Cart)
舉例：現(xiàn)在頁面是一個菜單頁，包含一個由菜式（Dish）組成的列表懒叛，用戶可以添加菜式到購物車和checkout丸冕。
如何實(shí)現(xiàn)這個Store呢？
import Vuex from ‘@wepy/x’;
//總的Store分為兩個子模塊(submodule)薛窥，一個是菜式列表（用于存儲在菜單里的菜式）胖烛，一個是購物車列表（用于存儲購物車?yán)锏牟耸剑?export default new Vuex.Store({
modules: {
dishList : DishList,
cart: Cart
},
getters: {
getDishById( state, id ){
return state.getters.getDishById(id)
}
}
});
//菜單列表Store，包括數(shù)據(jù)菜單列表和方法添加新菜式
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，包括購物車菜單列表和方法添加進(jìn)購物車罢杉，清空購物車和結(jié)賬
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(‘a(chǎn)ddDishesToCart’, 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")
)
}
}
});