Skip to content

Commit 7ee4d92

Browse files
committed
fix hot update
1 parent 25e0f1e commit 7ee4d92

File tree

10 files changed

+63
-48
lines changed

10 files changed

+63
-48
lines changed

examples/counter-hot/Counter.vue

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,22 +6,24 @@
66
<button @click="incrementIfOdd">Increment if odd</button>
77
<button @click="incrementAsync">Increment async</button>
88
<div>
9-
<div>Recent History: {{recentHistory}}</div>
9+
<div>Recent History (last 5 entries): {{ recentHistory }}</div>
1010
</div>
1111
</div>
1212
</template>
1313

1414
<script>
15-
import * as actions from './vuex/actions'
16-
import { recentHistory } from './vuex/getters'
15+
import { mapGetters, mapActions } from 'vuex'
1716
1817
export default {
19-
vuex: {
20-
actions,
21-
getters: {
22-
count: state => state.count,
23-
recentHistory
24-
}
25-
}
18+
computed: mapGetters([
19+
'count',
20+
'recentHistory'
21+
]),
22+
methods: mapActions([
23+
'increment',
24+
'decrement',
25+
'incrementIfOdd',
26+
'incrementAsync'
27+
])
2628
}
2729
</script>
Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,14 @@
1-
import { INCREMENT, DECREMENT } from './mutation-types'
2-
3-
export const increment = ({ dispatch }) => dispatch(INCREMENT)
4-
export const decrement = ({ dispatch }) => dispatch(DECREMENT)
1+
export const increment = ({ dispatch }) => dispatch('increment')
2+
export const decrement = ({ dispatch }) => dispatch('decrement')
53

64
export const incrementIfOdd = ({ dispatch, state }) => {
75
if ((state.count + 1) % 2 === 0) {
8-
dispatch(INCREMENT)
6+
dispatch('increment')
97
}
108
}
119

1210
export const incrementAsync = ({ dispatch }) => {
1311
setTimeout(() => {
14-
dispatch(INCREMENT)
12+
dispatch('decrement')
1513
}, 1000)
1614
}

examples/counter-hot/vuex/getters.js

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
1-
export function recentHistory (state) {
1+
export const count = state => state.count
2+
3+
const limit = 5
4+
5+
export const recentHistory = state => {
26
const end = state.history.length
3-
const begin = end - 5 < 0 ? 0 : end - 5
7+
const begin = end - limit < 0 ? 0 : end - limit
48
return state.history
59
.slice(begin, end)
610
.toString()

examples/counter-hot/vuex/mutation-types.js

Lines changed: 0 additions & 2 deletions
This file was deleted.
Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,9 @@
1-
import { INCREMENT, DECREMENT } from './mutation-types'
1+
export const increment = state => {
2+
state.count++
3+
state.history.push('increment')
4+
}
25

3-
export default {
4-
[INCREMENT] (state) {
5-
state.count++
6-
state.history.push('increment')
7-
},
8-
[DECREMENT] (state) {
9-
state.count--
10-
state.history.push('decrement')
11-
}
6+
export const decrement = state => {
7+
state.count--
8+
state.history.push('decrement')
129
}

examples/counter-hot/vuex/store.js

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import Vue from 'vue'
22
import Vuex from '../../../src'
3-
import mutations from './mutations'
3+
import * as getters from './getters'
4+
import * as actions from './actions'
5+
import * as mutations from './mutations'
46

57
Vue.use(Vuex)
68

@@ -11,14 +13,21 @@ const state = {
1113

1214
const store = new Vuex.Store({
1315
state,
16+
getters,
17+
actions,
1418
mutations
1519
})
1620

1721
if (module.hot) {
18-
module.hot.accept(['./mutations'], () => {
19-
const mutations = require('./mutations').default
22+
module.hot.accept([
23+
'./getters',
24+
'./actions',
25+
'./mutations'
26+
], () => {
2027
store.hotUpdate({
21-
mutations
28+
getters: require('./getters'),
29+
actions: require('./actions'),
30+
mutations: require('./mutations')
2231
})
2332
})
2433
}

examples/counter/Counter.vue

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,9 @@
1212
import { mapGetters, mapActions } from 'vuex'
1313
1414
export default {
15-
computed: mapGetters(['count']),
15+
computed: mapGetters([
16+
'count'
17+
]),
1618
methods: mapActions([
1719
'increment',
1820
'decrement',

examples/counter/store.js

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,8 @@ const mutations = {
2323
}
2424
}
2525

26+
// actions are functions that causes side effects and can involve
27+
// asynchronous operations.
2628
const actions = {
2729
increment: ({ dispatch }) => dispatch('increment'),
2830
decrement: ({ dispatch }) => dispatch('decrement'),
@@ -31,10 +33,13 @@ const actions = {
3133
dispatch('increment')
3234
}
3335
},
34-
incrementAsync ({ dispatch, state }) {
35-
setTimeout(() => {
36-
dispatch('increment')
37-
}, 1000)
36+
incrementAsync ({ dispatch }) {
37+
return new Promise((resolve, reject) => {
38+
setTimeout(() => {
39+
dispatch('increment')
40+
resolve()
41+
}, 1000)
42+
})
3843
}
3944
}
4045

src/helpers.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@ export function mapGetters (getters) {
1111
export function mapActions (actions) {
1212
const res = {}
1313
normalizeMap(actions).forEach(({ key, val }) => {
14-
res[key] = function () {
15-
return this.$store.call(val)
14+
res[key] = function (...args) {
15+
return this.$store.call(val, ...args)
1616
}
1717
})
1818
return res

src/index.js

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,6 @@ class Store {
2222
state = {},
2323
modules = {},
2424
plugins = [],
25-
getters = {},
2625
strict = false
2726
} = options
2827

@@ -39,7 +38,7 @@ class Store {
3938
this.dispatch = bind(this.dispatch, this)
4039

4140
// init state and getters
42-
extractModuleGetters(getters, modules)
41+
const getters = extractModuleGetters(options.getters, modules)
4342
initStoreState(this, state, getters)
4443

4544
// apply root module
@@ -125,8 +124,8 @@ class Store {
125124
res = Promise.resolve(res)
126125
}
127126
return res.catch(err => {
128-
console.warn(`[vuex] error in Promise returned from action ${type}`)
129-
console.warn(err)
127+
console.warn(`[vuex] error in Promise returned from action "${type}":`)
128+
console.error(err)
130129
})
131130
})
132131
}
@@ -196,7 +195,7 @@ class Store {
196195
this.module([], options, true)
197196

198197
// update getters
199-
const getters = extractModuleGetters(newOptions.getters || {}, newOptions.modules)
198+
const getters = extractModuleGetters(newOptions.getters, newOptions.modules)
200199
if (Object.keys(getters).length) {
201200
const oldVm = this._vm
202201
initStoreState(this, this.state, getters)
@@ -238,8 +237,8 @@ function initStoreState (store, state, getters) {
238237
Vue.config.silent = silent
239238
}
240239

241-
function extractModuleGetters (getters, modules, path = []) {
242-
if (!modules) return
240+
function extractModuleGetters (getters = {}, modules = {}, path = []) {
241+
if (!modules) return getters
243242
Object.keys(modules).forEach(key => {
244243
const module = modules[key]
245244
if (module.getters) {
@@ -254,6 +253,7 @@ function extractModuleGetters (getters, modules, path = []) {
254253
}
255254
extractModuleGetters(getters, module.modules, path.concat(key))
256255
})
256+
return getters
257257
}
258258

259259
function enableStrictMode (store) {

0 commit comments

Comments
 (0)