[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; // } } ```