vuex/docs/en/getters.md

Getters

Each getter is a function used to transform and compose the store data into a consumable format, either for the UI or another purpose. It returns a value computed from the store state:

import Vuex from 'vuex'

const store = new Vuex.Store({
  state: {
    values: [0, 9, 18]
  },
  getters: {
    total (state) {
      return state.values.reduce((a, b) => a + b)
    }
  }
})

Now store.getters.total function can be used in a Vue component similarly to state properties:

export default {
  computed: {
    total: store.getters.total
  }
}

Getters in a Separated File

It's possible that multiple components will need the same computed property based on Vuex state. Since computed getters are just functions, you can split them out into a separate file so that they can be shared in any component via the 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
  })
}

// in a component...
import { getters } from './store'
const { filteredTodos } = getters

export default {
  computed: {
    filteredTodos
  }
}

For an actual example, check out the Shopping Cart Example. For an actual example with hot reload API, check out the Counter Hot Example.

This is very similar to Getters in NuclearJS.