Yireo - Developer training

Open main menu

Vue Storefront 1 Fundamentals

Creating a custom Vuex store

A lesson preview of our Yireo On-Demand training on Vue Storefront 1 Fundamentals

Duration: 05:57 | Last Modified 30 May 2021

This is a preview lesson only

Note that this is a preview lesson. When accessing this lesson as part of the full training, there are a couple of benefits: The materials are available via the Yireo Courseware portal and can be presented as a slideshow, progress can be monitored, additional resources will be available. And obviously, all lessons - instead of just the preview lessons - will be available to you.

Get full access to the Vue Storefront 1 Fundamentals training

Student notes

Creating a custom Vuex store

In earlier lessons, we learned how to create a new PWA module and add some components to it. Now, let's make that example a bit more fancy, by playing around with Vuex.

Add a component (1/2)

File src/modules/foobar/components/Foobar.vue:

<template>
  <div>
    {{ counter }}
    <button @click="incrementCounter">Increment</button>
  </div>
</template>

In an earlier example, we already created a Foobar component. Let's use this example again, but in this case, instead of having a counter that relies on local state, we'll connect it to Vuex.

Add a component (2/2)

File src/modules/foobar/components/Foobar.vue:

<script>
module.exports = {
  computed: {
    counter () {
      return this.$store.getters['foobar/getCounter']
    }
  },
  methods: {
    incrementCounter () {
      this.$store.dispatch('foobar/incrementCounter', 1)
    }
  }
}
</script>

Instead of using local state for our counter, we'll use Vuex - the goal of this lesson is to implement a foobar Vuex store with a getter getCounter and a action incrementCounter.

Define a Vuex module

File src/modules/foobar/store/foobar.ts:

export default {
  namespaced: true,
  state: {
    counter: 0
  },
  getters: {
    getCounter: (state) =&gt; state.counter
  },
  actions: {
    incrementCounter: (context, payload) =&gt; {
      context.commit('increment', payload)
    }
  },
  mutations: {
    increment: (state) =&gt; state.counter++
  }
}

Our VSF1 PWA module will contain a Vuex module. The Vuex module itself is an object with the right options set: The Vuex module is namespaced, as in not to conflict with other Vuex stores. We'll add a simple getter, action and mutation. Note there was a separate lesson on the workings of Vuex, so if you have any questions here, refer to that lesson.

Register the Vuex module

File src/modules/foobar/index.ts:

import foobarStore from './store/foobar';

export const FoobarModule: StorefrontModule = function (
  app, store, router, moduleConfig, appConfig) {

  store.registerModule('foobar', foobarStore);
}

Finally, within the entry point of our VSF1 PWA module, we'll use the store argument of our module callback function to actually register the new foobar module into Vuex.

Summary

  • Adding a Vuex module is quite simple, once you have a PWA module running
  • Refer to the Vuex lesson for further details
# Practical exercise Extend upon the example component created in an earlier lesson. Add a Vuex store (aka Vuex module) to your Vue Storefront 1 module and make references to it from the example component (state, getters, mutations, actions).

Extensions

GitHub organizations

Legal information

Other Yireo sites

Get Social

About Yireo