If you needed a portion of products, you could do this:

computed() {
  firstProduct() {
    return this.$store.products[0]

We are doing this right in our component. What if more than one component needs firstProduct? We will just have to write the method in all the component that needs it. We can do better by using a getter in the store and exposing this getter to all the components:

// ./src/store/getters
export const productGetters = {
  // All products
  allProducts: (state, getters) => {
    return state.products
  // Get Product by ID
  productById: (state, getters) => id => {
    if (getters.allProducts.length > 0) {
      return getters.allProducts.filter(p => p._id === id)[0]
    } else {
      return state.product

export const manufacturerGetters = {
  // All manufacturers
  allManufacturers: state => state.manufacturers

Rather than the trivial firstProduct example, we have created getters for our shop. Don't bother about where the actual data is or how it's fetched. We will discuss that in Actions.

Table of Contents

    The name of getters already tells you what they do, and the code is straight to the point. Let's import the methods and use them our store:

    // ./src/store/getters
    // ...
    // Import getters
    import { productGetters, manufacturerGetters } from './getters'
    export default new Vuex.Store({
      strict: true,
      state: {
        cart: [],
        showLoader: false,
        product: {},
        products: [],
        manufacturers: []
      // GETTERS
      getters: Object.assign({}, productGetters, manufacturerGetters)

    We will see how these data are passed down to components in the Passing State Data to Components title

    Chris Nwamba

    95 posts

    JavaScript Preacher. Building the web with the JS community.