複数のコンポーネントは、Vuex state に基づいて、同じ算出プロパティを必要とすることが可能です。算出プロパティのゲッターは単に関数で、store 経由で任意のコンポーネントで共有されることができるよう、別ファイルにそれらを分割することができます:
import Vue from 'vue'
import Vuex from '../../../src'
import actions from './actions'
import mutations from './mutations'
import getters from './getters'
Vue.use(Vuex)
export default new Vuex.Store({
state: { /*...*/ },
actions,
mutations,
getters
})
// getters.js
export function filteredTodos (state) {
return state.messages.filter(message => {
return message.threadID === state.currentThreadID
})
}
// コンポーネントで ...
import { getters } from './store'
const { filteredTodos } = getters
export default {
computed: {
filteredTodos
}
}
実際例として、ショッピングカートの例 を確認してください。 ホットリロード API による実際の例として、ホットなカウンターの例 を確認してください。
これは NuclearJS のゲッターにとてもよく似ています。