Home » vue » globally accessing const variables from a Vuex store

globally accessing const variables from a Vuex store

Posted by: admin November 26, 2021 Leave a comment

Questions:

I have a very simple VueJS example I’m having some trouble with.

I have a js file called enums.js with the following line in it

export const modeEnumeration = { PLAYBACK: 'playback', RECORDING: 'recording', NONE: 'none' };

I’d like to set the initial value of a property in Vuex state to one of these modeEnumeration values. So this is my Vuex store.

import Vue from 'vue';
import Vuex from 'vuex';
import modeEnumeration from '../constants/enums';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    mode: modeEnumeration.NONE,
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  },
  getters: {
  },
});

However, I keep getting the following error in my Vuex store…

Uncaught TypeError: Cannot read property ‘NONE’ of undefined

What am I missing?

Answers:

You export a named object, so you need to import it with curly braces:

import { modeEnumeration } from '../constants/enums';

The other solution would be to export a default:

export default { PLAYBACK: 'playback', RECORDING: 'recording', NONE: 'none' };