The accessor serves two purposes:

  • It wraps the store so that it can be typed without conflicting with the default types for $store in a Nuxt project.
  • It allows us to avoid creating impossible type definitions for namespaced magic strings, like commit('mysubmodule/mutation').


  1. Getters, state, mutations and actions are flattened.
  2. Getters take priority over state (so state is not included if a getter of the same name exists).
  3. Modules are namespaced.

Because the accessor is flattened, you should avoid using the same name more than once between your getters, state, mutations and actions or you may receive the following error: Cannot set property <name> of #<Object> which has only a getter.

So, for example:

// Accesses this.$

// Accesses this.$store.getters['fullName']

// Runs this.$store.dispatch('initialiseStore')

// Runs this.$store.commit('SET_NAME', 'John Doe')
this.$accessor.SET_NAME('John Doe')

// Accesses this.$

// etc.

Typing the accessor

Adding types is simple. A helper function, getAccessorType, is provided, which compiles to nothing and only serves to return the correct type of the accessor so that it can be used where you see fit.

Make sure you define types correctly following these instructions.

Using the accessor

Components, fetch and asyncData

import Vue from 'vue'

export default Vue.extend({
  fetch({ app: { $accessor } }) {
  asyncData({ app: { $accessor } }) {
    return {
      myEmail: $,
  computed: {
    email() {
      // This (behind the scenes) returns this.$store.getters['email']
      return this.$
  methods: {
    resetEmail() {
      // Executes this.$store.dispatch('submodule/resetEmail', '')


import { Context } from '@nuxt/types'

export default ({ redirect, app: { $accessor } }: Context) => {
  // You can access the store here
  if ($ return redirect('/')
Edit this page on GitHub Updated at Sun, Feb 28, 2021