From 0e11035aabd037c43d70dc8f63d0f68415663c99 Mon Sep 17 00:00:00 2001 From: Evan You Date: Tue, 3 Jan 2017 16:49:24 -0500 Subject: [PATCH] use namespaced vuex modules --- src/devtools/App.vue | 4 ++-- src/devtools/index.js | 4 ++-- src/devtools/store/app-module.js | 21 ------------------- src/devtools/store/index.js | 19 +++++++++++++---- .../views/components/ComponentInstance.vue | 2 +- .../views/components/ComponentsTab.vue | 6 +++--- src/devtools/views/components/module.js | 1 + src/devtools/views/events/EventInspector.vue | 2 +- src/devtools/views/events/EventsHistory.vue | 6 +++--- src/devtools/views/events/EventsTab.vue | 2 +- src/devtools/views/events/module.js | 13 ++++++------ src/devtools/views/vuex/VuexHistory.vue | 10 ++++----- .../views/vuex/VuexStateInspector.vue | 8 +++---- src/devtools/views/vuex/VuexTab.vue | 4 ++-- src/devtools/views/vuex/actions.js | 14 ++++++------- src/devtools/views/vuex/module.js | 19 +++++++++-------- 16 files changed, 64 insertions(+), 71 deletions(-) delete mode 100644 src/devtools/store/app-module.js diff --git a/src/devtools/App.vue b/src/devtools/App.vue index c8163ee4b..bcd94af03 100644 --- a/src/devtools/App.vue +++ b/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: { diff --git a/src/devtools/index.js b/src/devtools/index.js index f417ef14f..42e5155c9 100644 --- a/src/devtools/index.js +++ b/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 => { diff --git a/src/devtools/store/app-module.js b/src/devtools/store/app-module.js deleted file mode 100644 index 1344f7322..000000000 --- a/src/devtools/store/app-module.js +++ /dev/null @@ -1,21 +0,0 @@ -const state = { - message: '', - tab: 'components' -} - -const 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 - } -} - -export default { - state, - mutations -} diff --git a/src/devtools/store/index.js b/src/devtools/store/index.js index 055471df8..c14ebb1bd 100644 --- a/src/devtools/store/index.js +++ b/src/devtools/store/index.js @@ -1,6 +1,5 @@ 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' @@ -8,8 +7,22 @@ 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,7 +33,6 @@ export default store if (module.hot) { module.hot.accept([ - './app-module', 'views/components/module', 'views/vuex/module', 'views/events/module' @@ -28,7 +40,6 @@ if (module.hot) { 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 diff --git a/src/devtools/views/components/ComponentInstance.vue b/src/devtools/views/components/ComponentInstance.vue index 50d6437bf..e5f035286 100644 --- a/src/devtools/views/components/ComponentInstance.vue +++ b/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 }) diff --git a/src/devtools/views/components/ComponentsTab.vue b/src/devtools/views/components/ComponentsTab.vue index 5dc3d3c2c..dcba5e916 100644 --- a/src/devtools/views/components/ComponentsTab.vue +++ b/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) { diff --git a/src/devtools/views/components/module.js b/src/devtools/views/components/module.js index 37a351026..5bf3ef845 100644 --- a/src/devtools/views/components/module.js +++ b/src/devtools/views/components/module.js @@ -31,6 +31,7 @@ const mutations = { } export default { + namespaced: true, state, mutations } diff --git a/src/devtools/views/events/EventInspector.vue b/src/devtools/views/events/EventInspector.vue index acebfdc2d..ed41ae13e 100644 --- a/src/devtools/views/events/EventInspector.vue +++ b/src/devtools/views/events/EventInspector.vue @@ -45,7 +45,7 @@ export default { } }, computed: { - ...mapGetters([ + ...mapGetters('events', [ 'activeEvent' ]), sortedEventData () { diff --git a/src/devtools/views/events/EventsHistory.vue b/src/devtools/views/events/EventsHistory.vue index 5ac53bc55..981358946 100644 --- a/src/devtools/views/events/EventsHistory.vue +++ b/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: { diff --git a/src/devtools/views/events/EventsTab.vue b/src/devtools/views/events/EventsTab.vue index 61066c1be..e9da216fc 100644 --- a/src/devtools/views/events/EventsTab.vue +++ b/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: { diff --git a/src/devtools/views/events/module.js b/src/devtools/views/events/module.js index d4636a3bd..051b07bb7 100644 --- a/src/devtools/views/events/module.js +++ b/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 diff --git a/src/devtools/views/vuex/VuexHistory.vue b/src/devtools/views/vuex/VuexHistory.vue index c82c441cc..21c5d84e1 100644 --- a/src/devtools/views/vuex/VuexHistory.vue +++ b/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', diff --git a/src/devtools/views/vuex/VuexStateInspector.vue b/src/devtools/views/vuex/VuexStateInspector.vue index a553ab27f..4a0d6a597 100644 --- a/src/devtools/views/vuex/VuexStateInspector.vue +++ b/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 diff --git a/src/devtools/views/vuex/VuexTab.vue b/src/devtools/views/vuex/VuexTab.vue index b70bf3ff8..6c20811fb 100644 --- a/src/devtools/views/vuex/VuexTab.vue +++ b/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, diff --git a/src/devtools/views/vuex/actions.js b/src/devtools/views/vuex/actions.js index e7fb3475f..841093ae0 100644 --- a/src/devtools/views/vuex/actions.js +++ b/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') } diff --git a/src/devtools/views/vuex/module.js b/src/devtools/views/vuex/module.js index 91c5a6faa..c0c2af3d3 100644 --- a/src/devtools/views/vuex/module.js +++ b/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,