1

I'm trying to use Vuex as shown in the application structure documentation. However, $store isn't showing in Vue dev tools and returning undefined in my code. I've used the shopping cart example as a reference.

import Vue from 'vue/dist/vue';
import store from './store';
import router from './router';

const app = new Vue({
  el: '#app',

  store,
  router,

  computed: {
    loading() {
      return this.$store.state.application.loading.active;
    }
  }
});

In store/index.js (following the example layout) I have: 

import Vue from 'vue';
import Vuex from 'vuex';

import application from './modules/application';

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    application
  }
});

And finally in store/modules/application.js:

const state = {
  loading: {
    active: true,
    message: ''
  },
  syncing: {
    active: false,
    message: ''
  }
}

const getters = {
  //
}

const actions = {
  //
}

const mutations = {
  /**
   * Update Loading
   * 
   * @param {*} state 
   * @param {string} appState
   * @param {boolean} active 
   * @param {string} message 
   */
  updateAppState(state, appState = false, active = false, message = '') {
    if (Object.keys(state).includes(appState)) {
      state.appState = {
        active: active,
        message: message
      }
    }
  }
}

export default {
  namespaced: true,
  state,
  getters,
  actions,
  mutations
}

Note i'm importing my router instance in a similar manor and it's working, router/index.js:

import Vue from 'vue/dist/vue';
import VueRouter from 'vue-router';

import ContentDefault from '../components/main/ContentDefault';

Vue.use(VueRouter);

export default new VueRouter({
  routes: [
    {
      // Default view
      path: '/',
      components: {
        default: ContentDefault
      },
    }
  ]
});

EDIT: Side issue, wasn't able to access $store in child components, it was because I was importing a different version of Vue in my main app and store files, vue instead of vue/dist/vue

Jam3sn
  • 1,077
  • 4
  • 17
  • 35

1 Answers1

2

You don't need the $ in your app const. And since you've just imported store you can use it directly.

Try the following:

import Vue from 'vue/dist/vue';
import store from './store';
import router from './router';

const app = new Vue({
  el: '#app',

  store,
  router,

  computed: {
    loading() {
      return store.state.application.loading.active;
    }
  }
});
Niko Peltoniemi
  • 494
  • 3
  • 7
  • That's worked, but shouldn't `$store`, `$vuex` or something similar show in the Vue dev tools, like `$route` does so I'm able to see the data? – Jam3sn Oct 17 '18 at 10:51
  • There's a tab in vue devtools for vuex. Check the top right corner. – Niko Peltoniemi Oct 17 '18 at 10:53
  • I see! `No Vuex store detected`, but it could be because i'm using it in Electron with Electron Forge adding Vue Dev tools. Also, i'm not able to use the store in a child component with neither `store`, `this.store`, or as documented `this.$store`, it's undefined. Any ideas? Accessing it in created and computed. – Jam3sn Oct 17 '18 at 10:58
  • I don't have any experience with Electron so I don't know how it's supposed to work. You could try to log 'this' in console. If store isn't present there you can import it and use it like I showed before. – Niko Peltoniemi Oct 17 '18 at 11:03
  • It's essentially a chrome enviroment, but the dev tools have to be hooked in separately. That however shouldn't effect `this` because it's still a browser envrioment. So when I console log `this`, `$store` isn't present. – Jam3sn Oct 17 '18 at 11:07
  • Found it, I was importing a different version of Vue in my app and store. – Jam3sn Oct 17 '18 at 12:15
  • Oh would you look at that! Totally missed it. Generally you'd want to use 'vue' to be able to use all the vue devtools features. – Niko Peltoniemi Oct 17 '18 at 12:59