# VueX ?! By Jimmy 111/05/25 --- ## What is VueX??? ---- ```javascript= Vue.component('my-component', { template: `<div>Hello Vue!</div>`, data () {}, props: {}, computed: {}, methods: {}, }); const vm = new Vue({ }).$mount('#app'); ``` ---- * data:不解釋 * template:模板（引入HTML字串模板） * computed:計算屬性 * methods:HTML的功能、互動「非同步事件」 ---- ### Props：Vue.js每個元件的實體狀態、模板等作用範圍必須是"獨立"的 因此就無法以父元件「直接」去修改子元件。 那麼，既然不能直接修改，那麼上下層元件之間，若需要從外部引進資料時，就需要透過props引用外部的狀態 ----  ---- ## 但是...  ---- 因此Vuex就是出來拯救大專案的人們啊啊啊啊^^ ---- ### Vuex 可以做為網站的全域狀態管理，可以將全域狀態集中管理 #### 有點類似Event Bus，但是 Event bus 比較像是一個全域的事件-- 組件 B 可以 emit 送出 bus 的事件或資料，而組件 C 則是可以透過 on 來監聽 bus 發出的事件或接收資料。 ---  ---- State:儲存狀態 ### 當組件需要更動狀態時，需要透過 Actions 發出一個 Commit 去呼叫 Mutations，再由 Mutations 去更改 State。 而整個 Vuex 的方法也稱為 Store。 ---- ### 根據圖片，流程大致如下 * Components 透過State內的資料render出畫面 * 資料需要變動時，透過Actions commit一個Mutation * Mutation 變更 State中的資料 * Components 重新render變化後的結果 ---- ### 那如何安裝vuex?? #### Sol_1 BY Terminal ```shell= vue add vuex ``` 註：只有在vue專案已經建立之下才有用 ---- #### sol_2 BY Vue CLI  ---- ### 讓我們看看各個元件的用途 State:有著store內所有資料的物件 ```javascript= state: { numbers: [1,3,5,7,9] } ``` ---- Mutations:就是包含著一堆函數的物件，每一個mutation就是一個函數，負責接收actions並更改state的資料，但要注意 * mutation必定是同步函數，沒有例外 * mutation是vuex中唯一可以改動state的方法 ---- 改變State狀態=> * 發出一個Action(dispatch an action) * 接收到Action後，執行對應的Mutation (commit a mutation) * 透過Mutation更改State ---- 那我們實際寫一個mutationㄅ ```javascript= mutations: { ADD_NUMBER(state,payload) { state.numbers.push(payload) } }, ``` * state => 可以自由取用或更動state的數值 * payload => 從actions傳來的參數 ---- Actions:呼叫Mutations而存在的東西 * Actions可以是非同步函數 * 一個Action中可以觸發多個Mutation ---- 那實際寫一個Actionsㄅ ```javascript= actions: { addNumber(context,number) { context.commit("ADD_NUMBER", number) } } ``` * context是一個物件，裡面可以使用store中的commit、getter或是state屬性 * 想傳入mutation的參數，沒有要傳入則可省略 ---- getters:基本上就跟vue裡面的state意思一樣，渲染之前，先對資料進行運算及過濾等～ 假設今天state中的資料有一個數字陣列，由於某種需求，希望使用時他是個"排序後"的陣列，當然可以到組件時再進行一次運算，但如果今天是數個組件都要用相同的邏輯，那getter就發揮作用ㄌ！ ---- 看個例子： ```javascript= getters: { sortedNumbers(state) { return state.numbers.sort((a, b) => a - b) }, }, ``` 箭頭函式XD ```javascript= getters: { sortedNumbers: (state) => state.numbers.sort((a, b) => a - b) }, ``` ---- ### 講了這麼多，那怎麼用？？ * 在安裝vuex後，你root的vue實體就會被掛上一個$store物件 ```javascript= this.$store.state.numbers this.$store.dispatch('某action') this.$store.commit('某mutation') this.$store.getters.sortedNumbers ... ``` ---- 接下來我們用這個網址講解～～ https://ithelp.ithome.com.tw/articles/10248514