Vue.js是一款流行的JavaScript框架,開發人員選擇它的原因之一是因為它提供了一種方便的方式來管理狀態。Vuex是Vue.js的官方狀態管理工具。在Vuex中,有兩種方式:getter和mutation來訪問狀態。本文將探討如何獲取getter。
在Vuex中,getter是用于從state中派生數據的一種方式。它是Vuex中用于獲取狀態的方法之一。使用getter,您可以按需計算狀態。getter返回計算后的值,而不需要您手動計算它。getter的優點是可以緩存狀態以提高性能。它還可以讓您輕松地根據狀態派生數據。
const store = new Vuex.Store({ state: { todos: [ { id: 1, text: '學習 JavaScript', done: true }, { id: 2, text: '學習 Vue', done: false }, { id: 3, text: '整個牛項目', done: false } ] }, getters: { doneTodos: state =>{ return state.todos.filter(todo =>todo.done) }, todosCount: (state, getters) =>{ return getters.doneTodos.length } } })
在上面的代碼中,我們定義了兩個getter方法。一個是完成的任務列表doneTodos,它返回一個數組,其中包含所有已完成的待辦事項。第二個是todosCount,它類似于一個計算屬性,它依賴于doneTodos getter,返回已完成的任務數。
你可以像上面那樣在store實例中定義getter。如果你想要獲得getter的值,你可以使用store.getters對象。例如,我們可以在Vue組件中通過$store.getters.doneTodos來獲取已完成的任務列表。\
computed: { doneTodos () { return this.$store.getters.doneTodos } }
在上面的代碼中,我們定義了一個計算屬性doneTodos,它基于store中的getter函數doneTodos。由于getter是一個函數,所以我們要調用它才能獲得它的值。這可以通過添加類似于方法括號的方式實現
computed: { doneTodos () { return this.$store.getters.doneTodos() } }
現在,我們已經了解了如何使用getter,并可以從store.getters對象中獲取getter的值。如果您想了解更多關于Vuex的信息,請查閱官方文檔。