Vue.js 是一個高效的前端框架,其中包含了許多實用的功能。在 Vue.js 中,Getters 是一個十分實用的功能,它可以讓我們在 store 中獲取數據的副本,同時也提供了一些方便的計算屬性。
在 Vue.js 中,Getters 可以從 store 中獲取數據的副本,以便我們在組件中使用它。當我們需要從 store 中獲取數據時,我們可以使用以下代碼來實現:
// 在 store.js 中 const store = new Vuex.Store({ state: { count: 0 }, getters: { getCount: state =>{ return state.count } } }) // 在組件中 computed: { getCount() { return this.$store.getters.getCount } }
在上面的代碼中,我們先在 store 中定義了一個 count 狀態和一個 getCount 的 Getter。然后,在我們的組件中,我們使用了 Vue.js 提供的 computed 屬性,把 $store.getters.getCount 的返回值綁定到了 getCount 這個計算屬性上。這樣,在我們需要獲取 store 中 count 的時候,只需要調用 getCount 這個計算屬性即可。
然而,我們注意到,當我們在組件中對 getCount 進行修改的時候,實際上是沒有效果的。這是因為,Getters 只是 store 中數據的一個副本,并不是 store 中數據的真正引用,因此當我們在組件中對 Getters 進行修改時,并不會修改 store 中的數據。下面是一個演示:
// 在組件中 methods: { addCount() { this.getCount++ } }
以上代碼是想在 getCount 的基礎上加一,并將結果賦值給 getCount,但實際上,這個加一操作是沒有效果的,getCount 還是原來的值。如果我們想真正修改 store 中的數據,需要使用 Mutations。