use namespaced vuex modules

src/devtools/App.vue

@@ -55,8 +55,8 @@ export default {
     events: EventsTab
   },
   computed: mapState({
-    message: state => state.app.message,
-    tab: state => state.app.tab,
+    message: state => state.message,
+    tab: state => state.tab,
     newEventCount: state => state.events.newEventCount
   }),
   methods: {

src/devtools/index.js

@@ -51,11 +51,11 @@ function initApp (shell) {
     })
 
     bridge.on('flush', payload => {
-      store.commit('FLUSH', parse(payload))
+      store.commit('components/FLUSH', parse(payload))
     })
 
     bridge.on('instance-details', details => {
-      store.commit('RECEIVE_INSTANCE_DETAILS', parse(details))
+      store.commit('components/RECEIVE_INSTANCE_DETAILS', parse(details))
     })
 
     bridge.on('vuex:init', state => {

src/devtools/store/index.js

@@ -1,15 +1,28 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
-import app from './app-module'
 import components from 'views/components/module'
 import vuex from 'views/vuex/module'
 import events from 'views/events/module'
 
 Vue.use(Vuex)
 
 const store = new Vuex.Store({
+  state: {
+    message: '',
+    tab: 'components'
+  },
+  mutations: {
+    SHOW_MESSAGE (state, message) {
+      state.message = message
+    },
+    SWITCH_TAB (state, tab) {
+      state.tab = tab
+    },
+    RECEIVE_INSTANCE_DETAILS (state, instance) {
+      state.message = 'Instance selected: ' + instance.name
+    }
+  },
   modules: {
-    app,
     components,
     vuex,
     events
@@ -20,15 +33,13 @@ export default store
 
 if (module.hot) {
   module.hot.accept([
-    './app-module',
     'views/components/module',
     'views/vuex/module',
     'views/events/module'
   ], () => {
     try {
       store.hotUpdate({
         modules: {
-          app: require('./app-module').default,
           components: require('views/components/module').default,
           vuex: require('views/vuex/module').default,
           events: require('views/events/module').default

src/devtools/views/components/ComponentInstance.vue

@@ -81,7 +81,7 @@ export default {
       this.toggleWithValue(false)
     },
     toggleWithValue (val) {
-      this.$store.commit('TOGGLE_INSTANCE', {
+      this.$store.commit('components/TOGGLE_INSTANCE', {
         id: this.instance.id,
         expanded: val
       })

src/devtools/views/components/ComponentsTab.vue

@@ -20,9 +20,9 @@ export default {
     ComponentInspector,
     SplitPane
   },
-  computed: mapState({
-    instances: state => state.components.instances,
-    inspectedInstance: state => state.components.inspectedInstance
+  computed: mapState('components', {
+    instances: state => state.instances,
+    inspectedInstance: state => state.inspectedInstance
   }),
   methods: {
     filter (e) {

src/devtools/views/components/module.js

@@ -31,6 +31,7 @@ const mutations = {
 }
 
 export default {
+  namespaced: true,
   state,
   mutations
 }

src/devtools/views/events/EventInspector.vue

@@ -45,7 +45,7 @@ export default {
     }
   },
   computed: {
-    ...mapGetters([
+    ...mapGetters('events', [
       'activeEvent'
     ]),
     sortedEventData () {

src/devtools/views/events/EventsHistory.vue

@@ -49,9 +49,9 @@ export default {
     ActionHeader
   },
   computed: {
-    ...mapState({
-      events: state => state.events.filteredEvents,
-      activeEventIndex: state => state.events.activeFilteredEventIndex
+    ...mapState('events', {
+      events: state => state.filteredEvents,
+      activeEventIndex: state => state.activeFilteredEventIndex
     })
   },
   filters: {

src/devtools/views/events/EventsTab.vue

@@ -20,7 +20,7 @@ import EventInspector from './EventInspector.vue'
 import { mapGetters } from 'vuex'
 
 export default {
-  computed: mapGetters([
+  computed: mapGetters('events', [
     'hasEvents'
   ]),
   components: {

src/devtools/views/events/module.js

@@ -6,27 +6,27 @@ const state = {
 }
 
 const mutations = {
-  'events/EMIT' (state, payload) {
+  'EMIT' (state, payload) {
     if (state.events.length === state.filteredEvents.length) {
       state.filteredEvents.push(payload)
     }
     state.events.push(payload)
     state.activeFilteredEventIndex = state.filteredEvents.length - 1
   },
-  'events/RESET' (state) {
+  'RESET' (state) {
     state.events = []
     state.filteredEvents = []
   },
-  'events/STEP' (state, n) {
+  'STEP' (state, n) {
     state.activeFilteredEventIndex = n
   },
-  'events/RESET_NEW_EVENT_COUNT' (state) {
+  'RESET_NEW_EVENT_COUNT' (state) {
     state.newEventCount = 0
   },
-  'events/INCREASE_NEW_EVENT_COUNT' (state) {
+  'INCREASE_NEW_EVENT_COUNT' (state) {
     state.newEventCount++
   },
-  'events/FILTER_EVENTS' (state, filter) {
+  'FILTER_EVENTS' (state, filter) {
     state.filteredEvents = state.events.filter(event => {
       return event.eventName.toLowerCase().includes(filter) || event.instanceName.toLowerCase().includes(filter)
     })
@@ -40,6 +40,7 @@ const getters = {
 }
 
 export default {
+  namespaced: true,
   state,
   mutations,
   getters

src/devtools/views/vuex/VuexHistory.vue

@@ -72,10 +72,10 @@ export default {
     }
   },
   computed: {
-    ...mapState({
-      history: state => state.vuex.history,
-      lastCommit: state => state.vuex.lastCommit,
-      activeIndex: state => state.vuex.activeIndex
+    ...mapState('vuex', {
+      history: state => state.history,
+      lastCommit: state => state.lastCommit,
+      activeIndex: state => state.activeIndex
     }),
     compiledFilter () {
       const regexParts = this.userInputFilter.match(REGEX_RE)
@@ -106,7 +106,7 @@ export default {
     }
   },
   methods: {
-    ...mapActions([
+    ...mapActions('vuex', [
       'commitAll',
       'revertAll',
       'commitSelected',

src/devtools/views/vuex/VuexStateInspector.vue

@@ -61,9 +61,9 @@ export default {
       showImportStatePopup: false
     }
   },
-  computed: mapGetters({
-    activeState: 'vuexActiveState'
-  }),
+  computed: mapGetters('vuex', [
+    'activeState'
+  ]),
   watch: {
     showImportStatePopup (val) {
       if (val) {
@@ -98,7 +98,7 @@ export default {
       } else {
         try {
           parse(importedStr) // Try to parse
-          this.$store.dispatch('importState', importedStr)
+          this.$store.dispatch('vuex/importState', importedStr)
           this.showBadJSONMessage = false
         } catch (e) {
           this.showBadJSONMessage = true

src/devtools/views/vuex/VuexTab.vue

@@ -20,8 +20,8 @@ import VuexStateInspector from './VuexStateInspector.vue'
 import { mapState } from 'vuex'
 
 export default {
-  computed: mapState({
-    hasVuex: state => state.vuex.hasVuex
+  computed: mapState('vuex', {
+    hasVuex: state => state.hasVuex
   }),
   components: {
     SplitPane,

src/devtools/views/vuex/actions.js

@@ -1,39 +1,39 @@
 export function commitAll ({ commit, state }) {
   if (state.history.length > 0) {
-    commit('vuex/COMMIT_ALL')
+    commit('COMMIT_ALL')
     travelTo(state)
   }
 }
 
 export function revertAll ({ commit, state }) {
   if (state.history.length > 0) {
-    commit('vuex/REVERT_ALL')
+    commit('REVERT_ALL')
     travelTo(state)
   }
 }
 
 export function commitSelected ({ commit, state }) {
-  commit('vuex/COMMIT_SELECTED')
+  commit('COMMIT_SELECTED')
   travelTo(state)
 }
 
 export function revertSelected ({ commit, state }) {
-  commit('vuex/REVERT_SELECTED')
+  commit('REVERT_SELECTED')
   travelTo(state)
 }
 
 export function reset ({ commit, state }) {
-  commit('vuex/RESET')
+  commit('RESET')
   travelTo(state)
 }
 
 export function step ({ commit, state }, index) {
-  commit('vuex/STEP', index)
+  commit('STEP', index)
   travelTo(state)
 }
 
 export function importState (store, importedState) {
-  store.commit('vuex/INIT', importedState)
+  store.commit('INIT', importedState)
   store.dispatch('reset')
 }
 

src/devtools/views/vuex/module.js

@@ -12,39 +12,39 @@ const state = {
 }
 
 const mutations = {
-  'vuex/INIT' (state, initialState) {
+  'INIT' (state, initialState) {
     state.initial = state.base = initialState
     state.hasVuex = true
     reset(state)
   },
-  'vuex/RECEIVE_MUTATION' (state, entry) {
+  'RECEIVE_MUTATION' (state, entry) {
     state.history.push(entry)
     state.activeIndex = state.history.length - 1
   },
-  'vuex/COMMIT_ALL' (state) {
+  'COMMIT_ALL' (state) {
     state.base = state.history[state.history.length - 1].state
     state.lastCommit = Date.now()
     reset(state)
   },
-  'vuex/REVERT_ALL' (state) {
+  'REVERT_ALL' (state) {
     reset(state)
   },
-  'vuex/COMMIT_SELECTED' (state) {
+  'COMMIT_SELECTED' (state) {
     state.base = state.history[state.activeIndex].state
     state.lastCommit = Date.now()
     state.history = state.history.slice(state.activeIndex + 1)
     state.activeIndex = -1
   },
-  'vuex/REVERT_SELECTED' (state) {
+  'REVERT_SELECTED' (state) {
     state.history = state.history.slice(0, state.activeIndex)
     state.activeIndex--
   },
-  'vuex/RESET' (state) {
+  'RESET' (state) {
     state.base = state.initial
     state.lastCommit = state.initialCommit
     reset(state)
   },
-  'vuex/STEP' (state, n) {
+  'STEP' (state, n) {
     state.activeIndex = n
   }
 }
@@ -55,7 +55,7 @@ function reset (state) {
 }
 
 const getters = {
-  vuexActiveState ({ base, history, activeIndex }) {
+  activeState ({ base, history, activeIndex }) {
     const entry = history[activeIndex]
     const res = {}
     if (entry) {
@@ -70,6 +70,7 @@ const getters = {
 }
 
 export default {
+  namespaced: true,
   state,
   mutations,
   actions,