讀 Vue3 Composition API 筆記 1

 一個用來處理組件共用狀態與邏輯的功能，是前端在工作時必備的，例如登入後要把登入狀態跟一些環境變數給予大部分的組件，或開發新的功能要在多個平行組件上運作，如果一層一層傳遞一是麻煩，二是要改 Code 追蹤的時候很痛苦，在 React 是使用 Context 或 Redux ，Vue 是 Vuex，原理都是創建一個 Store ，Store 儲存 State 與 Dispatch，例如登入與否，State:{ isLogin: false }，Dispatch 就會是一個更新 State 的 function，如 dispatch({ type:isLogin , data:true})，再透過 reducer 去更新 State 使狀態發生改變，意義在於使共用狀態與邏輯是可追蹤的，方便知道哪些組件會更改，以及除錯會比較方便。

在 Vue 3 中，綁定需要加上 ref ，例如： const isLogin = ref ( false ) ，因為原始型別與物件型別在傳值與傳參考的反應不同。Vue 2 升級 Vue 3 時，生命週期可以由 vue import，mount 改成 onMounted，watch(觀察對象, callback , option)，剩下的下集再續。

setup () {

   const isLogin = ref ( false )

   onMounted(()=>{

     dispatch()

})

}

參考資料：

Vue3文件 

Kuro 在大神來六角的解說

初學 Vuex

        Vuex 就是比較大型的儲存庫的概念，裡面存儲的數據可以傳給各個 .vue 檔，也可以傳

回來，規模大小是 Vuex(比較有規範跟方法) > store(開一個js檔案存) > eventbus(內外元件)。

首先安裝，筆者是用 Vue Cli 開發，用 npm 安裝，當然 yarn 也可以。

npm install vuex --save

在 main.js 中使用

import Vuex from 'vuex'

Vue.use(Vuex)

new Vue 裡加入 store，ES6 中 store: store 可以簡寫。

同樣在 main.js 中建立倉庫。

state 是儲存資料的地方，可以很多筆，跟 store 差異最大的地方是：改變 state 的資料時，必須

使用 mutation 裡的方法，例如 store.commit('increment', 10)，方法可以加入參數，所以上式就

可以將 count + 10。

在另外一個 .vue 檔實際讀改數據。

頁面還有其他東西，所以 <template> 部分標籤跟 method 的 } 有興趣嘗試的自行補上，count 

跟item 透過 this.$store.state 可以顯示為0 ，當按下按鈕觸發 addStore 的時候，利用 

this.$store.commit('mutation裡的方法',可選的參數)，來更改 state 裡的資料。

目前只看到基本用法，其他就留待日後研究。