Build an Online Shop with Vue


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.

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: Object.assign({}, productGetters, manufacturerGetters)

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

Like this article? Follow @codebeast on Twitter