oomusou

Functional Vue Architecture

Sam Xiao, Feb.18, 2019

Web 所面臨的挑戰

後端 MVC

約在 2015 年，主流的 Web 開發架構仍以後端 MVC 為主：

oomusou

<template>
  <div>
    <section class="todoapp">
			<header class="header">
				<h1>todos</h1>
				<input v-model="todo" @keyup.enter="addTodo" class="new-todo" autofocus autocomplete="off" placeholder="What needs to be done?">
			</header>
			<section class="main" v-if="isShowTodos">
				<input v-model="allCompleted" id="toggle-all" class="toggle-all" type="checkbox">
				<label for="toggle-all">Mark all as complete</label>

oomusou

{
  "include": [
    "./src/**/*"
  ],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "src/*"
      ]

oomusou

<template>
  <div class="table-pack spacing bottom">
    <div class="table-pack-head">
      <i class="icon icon-nav-cart"></i>
      <span class="spacing left sm middle">購物車明細</span>
      <span class="sub">共
        <b class="value">{{ cartDetail.length }}</b>項商品
      </span>
      <a class="btn-switch" data-toggle="collapse" href="#cart-list" aria-expanded="false">
        <i class="icon icon-minus"></i>

oomusou

import { pipe, gt, any, not, either, propEq } from 'ramda';
import { getGetter, renderState, getState } from '@/helpers/vuex';
import { paymentEnum } from '@/constant/payment-info';

/** 由 [取得運費 + 應付金額] API 取得 [分期門檻] */
const installmentLimit = renderState('AmountDetail', 'installmentLimit');

/** 小於 [信用卡分期門檻] */
const lessThanInstallmentLimit = pipe(
  getGetter('AmountDetail', 'realAmount'),

oomusou

import { pipe, gt, any, not, either, propEq } from 'ramda';
import { getGetter, renderState, getState } from '@/helpers/vuex';
import { paymentEnum } from '@/constant/payment-info';

/** 由 [取得運費 + 應付金額] API 取得 [分期門檻] */
const installmentLimit = renderState('AmountDetail', 'installmentLimit');

/** 小於 [信用卡分期門檻] */
const lessThanInstallmentLimit = pipe(
  getGetter('AmountDetail', 'realAmount'),

oomusou

import { pipe, gt, any, not, either, propEq } from 'ramda';
import { getGetter, renderState, getState } from '@/helpers/vuex';
import { paymentEnum } from '@/constant/payment-info';

/** 由 [取得運費 + 應付金額] API 取得 [分期門檻] */
const installmentLimit = renderState('AmountDetail', 'installmentLimit');

/** 小於 [信用卡分期門檻] */
const lessThanInstallmentLimit = pipe(
  getGetter('AmountDetail', 'realAmount'),

oomusou

<template>
  <div>
    <ul>
      <li v-for="(item, index) in books$" :key="index">
        Title : {{ item.title }}, Price : {{ item.price }}
      </li>
    </ul>
  </div>
</template>

oomusou

<template>
  <div id="counter">
    <h1>{{ showCount }}</h1>
    <button @click="addCount(1)">+</button>
  </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex';

oomusou

import Vue from 'vue';
import Vuex from 'vuex';
import todoApi from '../../api/todosApi';

Vue.use(Vuex);

const setTodos = (state, payload) => state.todos = payload;

const addItem = (state, payload) =>
  state.todos.push({ title: payload, completed: false });