var defer = new Promise(function(resolve, reject) { 
        // 如果成功, resolve()
        // 如果失敗, reject()
	})
	.then(laterOn)
	.catch(printError);

import Axios, { AxiosRequestConfig, AxiosResponse, AxiosPromise } from 'axios';

const server = Axios.create({
  baseURL: import.meta.env.VITE_APP_BASE_API,
 // timeout: 15000,
 // withCredentials: config.apiConfig.withCredentials
})

// 请求攔截
axios.interceptors.request.use((config:any) => {

    //如果localStorage.token有數據，參閱知識點
    if ( localStorage.token ) {
        //解釋token的使用方式
        config.headers.Authorization=localStorage.token;

    }
    return config;
},
(error) => {
    return Promise.reject(error)
})

//響應攔截
axios.interceptors.response.use((response) => {
    // 這裡是對響應進行統一處理
    return response
},
(error) => {
     // 可以對錯誤進行統一處理
    if (error.response.status === 401) {
        localStorage.removeItem('token');
    }
   // console.log(error.response.status)
    return Promise.reject(error)
})

/**
 * 封装post请求,在api模塊直接調用
 *  -url 請求地址
 *  -params 參數
 *  -isQs 是否將參數序列化
 */
export const postApi = (url: string, params?: any, isQs?: boolean): AxiosPromise<any> => {
  return server({
    url,
    method: 'post',
    data: isQs ? stringify(params) : params
  })
}
/**
 * 封装get请求,在api模塊直接調用
 *  -url 請求地址
 *  -params 參數
 */

export const getApi = (url: string, query: any): AxiosPromise<any> => {
  return server({
    url,
    method: 'get',
    params: query
  })
}

/**
 * 封装put请求,在api模塊直接調用
 *  -url 請求地址
 *  -params 參數
 */

export const editApi = (url: string, params?: any, isQs?: boolean): AxiosPromise<any> => {
  return server({
    url,
    method: 'put',
    data: isQs ? stringify(params) : params
  })
}

/**
 * 封装delete请求,在api模塊直接調用
 *  -url 請求地址
 *  -id 參數
 */

export const removeApi = (url: string, id?: any, isQs?: boolean): AxiosPromise<any> => {
  return server({
    url,
    method: 'delete',
    data: isQs ? stringify(id) : id
  })
}

import { postApi } from '@/axios/index'

// 登入
export const Login = (params: any) => postApi('/auth/login', params, true)
export const Register = (params: any) => postApi('/auth/register', params, true)

npm install vuex@next --save
yarn add vuex@next --save

import Vuex from 'vuex'
Vue.use(Vuex)

export const app = new Vue({
        el: '#app',
        store,      
        components: { App },
        template: '<App/>'
})

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

export default new Vuex.Store({
 state: {
    //如同data
    msg: 'Vuex',
 } ,
 actions: {
//呼叫mutations處理分同步，第一個參數：context,第二個參數：payload
 }
 mutations: {
    如同methods，只有mutations才能操作state資料狀態
    第一個參數：state,第二個參數：payload
 },
 getters: {
 //狀態延伸
 }
})

<template>
<div>
<h1>{{msg}}</h1>
</div>
</template>

<script>
import { app } from '../main'
import Vue from 'vue'
import { mapState } from 'vuex'
export default {

    computed: {
        ...mapState({
        msg: state => state.msg
        })
    }
}
</script>

import axios from "axios"

export default {
   // actions, mutations, getters 是屬於區域變數
   namespaced: true, 
   state: {

   },
   actions: {
       getDayObjects(context) {
           const api = `${process.env.APIPATH}/api/Teacher/LoadTeacherOpenClass`;
           axios.post(api, raw, {
                   headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'Authorization': `Bearer ${process.env.TOKEN}` }
               })
               .then((res) => {
                    if (res.data.IsSuccess) {
                       context.commit('DAYOBJECTS', res.data.DayObjects);
                    }
               })
               .catch((error) => {
                   console.log(error);
               })
       }
   },
   mutations: {
       DAYOBJECTS(state, payload) {
           state.DayObjects = payload;
       },
   }
   getters: {
       DayObjects: state => state.DayObjects, 
   }
}

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
import dayobjectsModules from './modules/dayobjects'
import modalModules from './modules/modal'
export default new Vuex.Store({
 state: {
    //如同data
    msg: 'Vuex',
 } ,
 actions: {
//呼叫mutations處理分同步，第一個參數：context,第二個參數：payload
 }
 mutations: {
    如同methods，只有mutations才能操作state資料狀態
    第一個參數：state,第二個參數：payload
 },
 getters: {
 //狀態延伸
 },
  modules: {   
    dayobjectsModules,  
},
})

<template>
<div>
<h1>{{msg}}</h1>
</div>
</template>

<script>
import { app } from '../main'
import Vue from 'vue'
import { mapState,mapActions,mapGetters } from 'vuex'
export default {
created(){
     this.getDayObjects();
},
 methods: {
       ...mapActions('dayobjectsModules', ['getDayObjects']),
 },
    computed: {
        ...mapState({
        msg: state => state.msg
        }),  
        ...mapGetters('dayobjectsModules', ['DayObjects']),
    }
}
</script>

npm install emailjs-com --save

<template>
<div>
  <el-form @submit.prevent="sendMail">
        <el-form-item label="姓名" prop="name">
            <el-input name="form_name" v-model="Forms.name" placeholder="請輸入你的姓名" type="test" />
        </el-form-item>
        <el-form-item label="email" prop="email">
            <el-input name="form_email" v-model="Forms.email" placeholder="請輸入你的email" type="email" />
        </el-form-item>
        <el-form-item label="行動電話" prop="phone">
            <el-input name="form_phone" v-model="Forms.phone" placeholder="請輸入你的行動電話" type="text" />
        </el-form-item>
  </el-form>
</div>
</template>

<script setup lang="ts">
import emailjs from 'emailjs-com';
    const form_name = ref<string | null>('');
    const form_email = ref<string | null>('');
    const form_phone = ref<string | null>('');
   
   
//送出的表單
const sendMail = (e: { target: string | HTMLFormElement; }) => {
    try {
        const templateParams = {
         
            form_name: form_name,
            form_email: form_email,
            form_phone: form_phone,
          
        }
     //   console.log(templateParams)
        
        emailjs.sendForm(import.meta.env.VITE_SENDMAIL_SERVICE, import.meta.env.VITE_SENDMAIL_TEMPLATE, e.target,
            import.meta.env.VITE_SENDMAIL_USERID, templateParams)

    } catch (error) {
        console.log({ error })
    }
}


</script>

npm install --save pinia

import { createPinia } from 'pinia'

const pinia = createPinia()

const app = createApp(App)
app.use(pinia)
app.mount('#app')

import { createSSRApp } from 'vue'
+ import { createPinia } from 'pinia'
import App from './App.vue'
+ const pinia = createPinia()

// SSR requires a fresh app instance per request, therefore we export a function
// that creates a fresh app instance. If using Vuex, we'd also be creating a
// fresh store here.
export function createApp() {
  const app = createSSRApp(App);
+   app.use(pinia)
  return { app }
}

//引入defineStore
import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
    //state如同data
    state: () => {
        return {
            count: 0,
            cardLists:[],
            forms: {
                email: '',
                password:'',
            }
        }
    },
    //如同computed
    getters: {
        doubleCount: (state) => state.count * 2,
    },
    //如同method＝>
    
    actions: {
        addCount() {
            this.count++
        },
        async fetchApi() {
            try {
                const api = 'https://api.coindesk.com/v1/bpi/currentprice.json';
               /* let headers = {
                  "Content-Type": "application/json",
                   "Accept": "application/json",
                    //  Authentication: 'secret'
                    //  "Authorization": `Bearer ${token}`,
                }*/
                const res = await fetch(api, { headers: headers, method: "GET" });
                // this方法
                this.cardLists = await res.json();
                console.log('lists.value', this.cardLists)
               
            } catch (error) {
                console.log(error)
            }
        
        },
         async loginIn () {
           try {
                
                const api = `${import.meta.env.VITE_API_DEFAULT_URL}/auth/login`

                let headers = {
                "Content-Type": "application/json",
                "Accept": "application/json",
                //  "Authorization": `Bearer ${token}`,
                }
                //以下是API文件中提及必寫的主體参數
                 let body = {
                    email: this.forms.email,
                    password:this.forms.password,
                }
                fetch(api, {
                    method: "POST",
                    headers: headers,
                    body: JSON.stringify(body)//****重點 */
                })
                .then(res => res.json())
                    .then(json => {
                    console.log('login',json)
                });
            }
            catch (error) {
                console.log(error)
            }
        }
    },
})

<template>
  <button @click="addCount" class="add_btn">add count</button>
  <div>{{counter.count}}</div> 
   {{ counter.cardLists }}
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
//引入Store 
import { useCounterStore } from '../stores/counter'
    //宣告
    const counter = useCounterStore();
    const { addCount,fetchApi } =counter;
    onMounted(() => {
      fetchApi();
    })
</script>

import { defineStore } from 'pinia';
//引入vue Composition API
import { ref,computed } from 'vue';
//改為Function 寫法與Composition API
export const useCounterStore = defineStore('counter', ()=>
{
    const count = ref(0);

    //computed
    const doubleCount = computed(() =>
    {
       return count.value * 2
    })
    
    const addCount = () =>
    {
        count.value ++
    }
    const cardLists=ref([])
    const fetchApi = async() =>
    {
        try {
            const res = await axios.get('https://api.coindesk.com/v1/bpi/currentprice.json');
            cardLists.value = res.data;
        } catch (error) {
            console.log(error)
        }
     
    }
    //必須輸出 return 
    return {
        count,addCount,doubleCount,
        cardLists,fetchApi
    }
})

<template>
    <div>
<p>{{store.count}}</p>
<pre>
  {{ store.cardLists }}
</pre>
<button @click="clickAdd">Add</button>
<button @click="store.fetchApi">fetchApi</button>
    </div>
</template>

<script setup lang="ts">
//引入Store 
import { useCounterStore } from '@/stores/counter.js';

//宣告store = useCounterStore()
const store = useCounterStore();

const clickAdd = () => {
//使用 store action時 store.addCount()
  store.addCount()
}
</script>

<template>
  <div>
    <button @click="clickAdd">Add</button>
    <h1>{{ counter }}</h1>

    <div> {{ cardLists }}</div>
    <pre>
      {{ cardLists }}
    </pre>
  </div>
</template>

<script setup lang="ts">
import { ref,onMounted } from 'vue';

//引入 import {storeToRefs } from 'pinia'
import {storeToRefs } from 'pinia';
// @ts-ignore
import { useCounterStore } from '../stores/counter.js';
//宣告store = useCounterStore()
const store = useCounterStore();
//解構store,數據取出counter, cardLists
const { counter, cardLists } = storeToRefs(store);
 const { fetchApi, addCount } = store;

 const clickAdd = () => {
    addCount()
}
onMounted(() => {
    fetchApi();
});
</script>

// @ts-check 引入pinia的defineStore與acceptHMRUpdate
import { defineStore, acceptHMRUpdate } from 'pinia'

/**模擬登入*/
function apiLogin(a: string, p: string) {
  if (a === 'ed' && p === 'ed') return Promise.resolve({ isAdmin: true })
  if (p === 'ed') return Promise.resolve({ isAdmin: false })
  return Promise.reject(new Error('invalid credentials'))
}

export const useUserStore = defineStore({
  id: 'user',
  state: () => ({
    name: 'Eduardo',
    isAdmin: true,
  }),

  actions: {
    logout() {
     // 登出以後 ＝>使用$patch修改state 數據
      this.$patch({
        name: '',
        isAdmin: false,
      })

      // 我們可以做其他事情，例如重定向用戶
    },

    /**
     * 嘗試登入用戶
     */
    async login(user: string, password: string) {
      const userData = await apiLogin(user, password)
      // 登入以後 ＝>使用$patch修改state 數據
      this.$patch({
        name: user,
        ...userData,
        
      })
      console.log(userData,)
    },
  },
})

if (import.meta.hot) {
  import.meta.hot.accept(acceptHMRUpdate(useUserStore, import.meta.hot))
}

// @ts-check 引入pinia的defineStore與acceptHMRUpdate
import { defineStore, acceptHMRUpdate } from 'pinia'
//引入useUserStore
import { useUserStore } from './user'

export const useCartStore = defineStore({
  id: 'cart',
  state: () => ({
    rawItems: [] as string[],
  }),
  getters: {
    items: (state): Array<{ name: string; amount: number }> =>
      //https://medium.com/@davelin18yufan/js%E5%AD%B8%E7%BF%92%E7%AD%86%E8%A8%98-%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3reduce%E7%9A%84%E7%94%A8%E6%B3%95-95738c3f9114
      state.rawItems.reduce((items, item) => {
        //尋找
        const existingItem = items.find((it) => it.name === item)
        //console.log('現有項目existingItem',existingItem)
        if (!existingItem) {
          //console.log('19',existingItem)
          items.push({ name: item, amount: 1 })
        } else {
          //console.log('22',existingItem.amount++)
          existingItem.amount++
        }
        //console.log('items',items)
        return items
      }, [] as Array<{ name: string; amount: number }>),
  },
  actions: {
    //新增Item
    addItem(name: string) {
      this.rawItems.push(name)
    },
    //刪除
    removeItem(name: string) {
      //lastIndexOf搜尋最後一次出現的
      //https://www.w3schools.com/jsref/jsref_lastindexof.asp
      const i = this.rawItems.lastIndexOf(name)
      //splice() 方法可以藉由刪除既有元素並
      if (i > -1) this.rawItems.splice(i, 1)
    },

    async purchaseItems() {
      const user = useUserStore()
      if (!user.name) return

      console.log('購買', this.items)
      const n = this.items.length
      this.rawItems = []

      return n
    },
  },
})

if (import.meta.hot) {
  console.log('import.meta.hot', import.meta.hot);
  import.meta.hot.accept(acceptHMRUpdate(useCartStore, import.meta.hot))
}

<script setup lang="ts">
//引入Store 
import { useCartStore } from '@/stores/cart'
import { useUserStore } from '@/stores/user'
    //宣告
    const cart = useCartStore();
    const user = useUserStore();
    const itemName = ref<string>('');

    // 新增Item到購物車
    const addItemToCart =()=>{
        if (!itemName.value) return
        cart.addItem(itemName.value)
        itemName.value = ''
    }
    // 清空購物車
    const clearCart =()=>{
        if (window.confirm('您確定要清空購物車嗎?')) {
            cart.rawItems = []
        }
    }
    // 購買
    const buy =async()=>{
        const n = await cart.purchaseItems()
        console.log(`買 ${n} items`)
        cart.rawItems = []
    }
</script>

<template>
    <div>
        <input type="text" v-model="itemName" /> 
        <button class="add_btn" @click="addItemToCart">Add</button>
        <!--新增的Item-->
        <ul>
            <li v-for="item in cart.items" :key="item">
                {{item.name}}
                <!--刪除的按鈕-->
                <button  class="delete_btn"  @click="cart.removeItem(item.name)"
              type="button">X</button>
            </li>
        </ul>
        <!--購買按鈕-->
        <button class="buy_btn"  :disabled="!user.name">Buy</button>
        <!--清除購物車按鈕-->
        <button
            class="delete_btn" 
            :disabled="!cart.items.length"
            @click="clearCart"
            type="button"
            data-testid="clear"
            >Clear the cart</button>
    </div>

</template>

// @ts-check 引入pinia的defineStore與acceptHMRUpdate
import { defineStore, acceptHMRUpdate } from 'pinia'
//引入vue Composition API
import { ref,computed } from 'vue';
//引入useUserStore
import { useUserStore } from './user'
export const useCartStore = defineStore('cart', () => { 
    
    const rawItems = ref<any[]>([]);
    const items = computed(() =>{
        rawItems.value.reduce((items: any[], item: any) => {
            const existingItem = items.find((i:any) => i.name === item)
            if (!existingItem) {
            items.push({ name: item, amount: 1 })
            } else {

            existingItem.amount++
            }
            return items
        },[] as Array<{ }>)
    })

  const addItem = (name: string) => {
    console.log('新增的input 數據：', name);
    rawItems.value.push(name)
  }
  const removeItem = (name: string) => {
      console.log('刪除：',name)
        const i = rawItems.value.indexOf(name)
      //splice() 方法可以藉由刪除既有元素並
      if (i > -1) rawItems.value.splice(i, 1)
  }
  const purchaseItems = () => { 
        const user = useUserStore()
        if (!user.name) return

       console.log('購買', items)
      // const n = items.length
        rawItems.value = []

       //return n
    }
    return {
        rawItems,items,addItem ,removeItem,purchaseItems
    }
})

<template>
    <div>
      {{title}}
        <input type="text" v-model="itemName" /> 
        <button class="add_btn" @click="addItemToCart">Add</button>
        <ul>
            <li v-for="item in items" :key="item" v-show="items.length!=0">
                {{item.name}}
               <button  class="delete_btn"  @click="removeItem(item.name)"
              type="button">X</button>
            </li>
        </ul>
        <button class="buy_btn"  
        @click="buy"
        :disabled="!name">Buy</button>
        <button
            class="delete_btn" 
          @click="clearCart"
          type="button"
          data-testid="clear"
        >Clear the cart</button>
    </div>
</template>

<route>
{
    path: '/aboutus',
    name: 'AboutUs',
    meta: {
        layout: 'frontLayout', 
    }
}
</route>

<script setup lang="ts">
//引入pinia
import {storeToRefs} from 'pinia';
import {ref,onMounted} from 'vue'

//引入Store 
import { useCartStore } from '../stores/cartTest'
import { useUserStore } from '../stores/userTest'
    const title =ref<string>('關於我們');
    //宣告
    const cart = useCartStore();
    const user = useUserStore();
    //解構store
    const { rawItems,items } = storeToRefs(cart)
    const { addItem ,removeItem,purchaseItems } = cart;
     const { name,isAdmin } = storeToRefs(user);
    // const { logout,login } = user;

    const itemName = ref<string>('');
    const addItemToCart =()=>{
        if (!itemName.value) 
        return
        cart.addItem(itemName.value)
        itemName.value = ''
       
    }
    const clearCart =()=>{
        if (window.confirm('您確定要清空購物車嗎?')) {
            rawItems.value = []
        }
    }
    const buy =async()=>{
        const n = await purchaseItems()
        console.log(`買 ${n} items`)
        rawItems.value = []
    }
    onMounted(() => {
       // getItems()
    }); 
</script>

localStorage.setItem(‘Name',Lara)

sessionStorage.setItem(‘Name',Lara)

localStorage.getItem(‘Name')
sessionStorage.getItem(‘name')

localStorage.removeItem(‘Name')
sessionStorage.removeItem(‘Name')

localStorage.clear();
sessionStorage.clear();

let user = [
     { name: 'Lara',
      phone: '0911123456',
      birthday:'2022-12-19'}
  ]
  var userString = JSON.stringify(user)
  localStorage.setItem('User', userString);
  sessionStorage.setItem('User', userString);

JSON.parse(localStorage.getItem('User'))
 JSON.parse(sessionStorage.getItem('User'))

import firebase from "@/config/firebaseConfig.js";
firebase.database().ref('schedules/');

const teacherLists = ref<any>({})
const getTeachers = () => {
    teachers.once('value', (snapshot: { val: () => any; }) => {
        teacherLists.value = snapshot.val();
    })
}

myData.on('value', (snapshot)=>{
var data = snapshot.val()
console.log(data)
})

let query = {
    id: Math.floor(Date.now() / 1000),
    title: scheduleForm.value.title,
}
firebase.database().ref('schedules/' + query.id).set(query);

var todos = db.ref('todos');
todos.push({content:'去看電影'});

var Data = {
  name: name,
  mail:mail,
  phone:phone
} 
// 分別將資料寫進資料庫'user/'底下
// 也會同時在'uses/'下開啟一個name的子節點，並且寫入相同的data
var updates = {};
  updates['/users/' + newPostKey] = postData;
  updates['/users/' + name + '/' + newPostKey] = postData;
  return firebase.database().ref().update(updates);

const toDelete = (item: any) => {
    teachers.child(key).remove();
}

userRef.orderByChild("weight").startAt(60).once("value",  (snapshot)=> {
    snapshot.forEach( (item)=> {
        console.log(item.val());
    });
});

userRef.orderByChild("weight").endAt(80).once("value", (snapshot)=> {
    snapshot.forEach(function (item) {
        console.log(item.val());
    });
});

userRef.orderByChild("weight")
.equalTo(40).once("value",  (snapshot)=> {
    snapshot.forEach( (item)=> {   
        console.log(item.val(), item.key);
    });
});

userRef.orderByChild("weight").startAt(50).limitToFirst(1).once("value",  (snapshot)=> {
    snapshot.forEach( (item)=> {
        console.log(item.val());
    });
});