Vue.js的getter是一種計算屬性,基于data的值,實現對數據的處理和操作。其中getter的參數是state,在Vuex store中被使用。在getter中,可以根據傳入的state來計算處理需要的數據。
// 示例代碼 const store = new Vuex.Store({ state: { count: 0, }, getters: { getCount: (state) =>{ return state.count; }, addCount: (state, value) =>{ return state.count + value; }, }, }); // 調用getter console.log(store.getters.getCount); // 輸出 0 console.log(store.getters.addCount(5)); // 輸出 5
在上面的代碼中,我們定義了一個名為getCount的getter,它接收state作為參數,并返回state中的count值。我們還定義了名為addCount的getter,它接收兩個參數:state和值value,用于計算state.count + value。
在組件中如何使用getter?在Vue.js組件中,getter可以在computed中使用,調用getter就像調用計算屬性的方式一樣:
// 示例代碼{{ getCount }}
在組件中,我們使用了Vue.js提供的mapGetters方法,將getter映射到組件的計算屬性中,然后在template中調用。
總結一下,Vue.js的getter參數是state,在Vuex Store中使用,用于根據傳入的數據計算需要處理的數據。在Vue.js組件中,可通過computed將getter映射到計算屬性中,然后在模板中使用。
上一篇vue git教程
下一篇html導航欄底部代碼