[toc] ### 組件中的數據以及監聽事件 #### 1. data data 中的數據需要 return，用 {{ words }} 渲染到頁面 ```js data() { return { words: [], hotcities: [], cities: [], }; } ``` #### 2. computed computed 計算屬性會 return 出一個數據出來，也可以用 {{ letter }} 直接渲染到頁面 計算屬性用函數 return 的方式，可以操作數據的計算以及變化 ```js computed: { letter() { return this.$store.state.letter; } } ``` #### 3. watch watch 可以監聽 data 以及 computed 中數據的變化，并且提供兩個參數，newVal 和 oldVal ```js watch: { letter(newVal, oldVal) { // console.log(newVal); var element = this.$refs[newVal][0]; this.scroll.scrollToElement(element, 300); } } ``` ### Vuex 中的數據以及事件 #### 1. state state 中用來存儲公共數據，在組件中，通過 this.$store.state.count 訪問，或者 {{ $store.state.count }} ```js state: { count: 0, // 如果組件想要訪問 state 的數據，需要 this.$store.state.*** 訪問 } ``` #### 2. mutations (行為) mutations 用來操作 state 里面存儲數據的方法，它接受兩個參數，固定參數 state 和 接受的參數 子組件只有觸發 mutations 中的方法，才可以改變 state 中的值 組件使用this.$store.commit('方法名', 參數)觸發store中的方法 ```js mutations: { changeLetter(state, letter) { // console.log(letter); this.state.letter = letter; } } ``` #### 3. actions (派發行為) Action 類似于 mutation，不同在于： * Action 提交的是 mutation，而不是直接變更狀態。 * Action 可以包含任意異步操作。 * 接受兩個參數，context 和 傳遞給 mutations 中事件的 參數 ```js actions: { changeLetter(context, letter) { context.commit('changeLetter', letter); // console.log(letter); } } ``` #### 4. getters (計算屬性) getters 類似與組件中的計算屬性，接受(state, 傳參)，return 出一個處理過的數據，可以直接通過 {{ $store.getters.newLetter }} 渲染到頁面，或者 this.$store.getters.newLetter 直接讀取 ```js getters: { newLetter(state) { return state.letter + 'a'; } // newLetter: function(state) { // return state.letter; // } } ```