Răsfoiți Sursa

fix hot update

Evan You 8 ani în urmă
părinte
comite
7ee4d922c9

+ 12 - 10
examples/counter-hot/Counter.vue

@@ -6,22 +6,24 @@
     <button @click="incrementIfOdd">Increment if odd</button>
     <button @click="incrementAsync">Increment async</button>
     <div>
-      <div>Recent History: {{recentHistory}}</div>
+      <div>Recent History (last 5 entries): {{ recentHistory }}</div>
     </div>
   </div>
 </template>
 
 <script>
-import * as actions from './vuex/actions'
-import { recentHistory } from './vuex/getters'
+import { mapGetters, mapActions } from 'vuex'
 
 export default {
-  vuex: {
-    actions,
-    getters: {
-      count: state => state.count,
-      recentHistory
-    }
-  }
+  computed: mapGetters([
+    'count',
+    'recentHistory'
+  ]),
+  methods: mapActions([
+    'increment',
+    'decrement',
+    'incrementIfOdd',
+    'incrementAsync'
+  ])
 }
 </script>

+ 4 - 6
examples/counter-hot/vuex/actions.js

@@ -1,16 +1,14 @@
-import { INCREMENT, DECREMENT } from './mutation-types'
-
-export const increment = ({ dispatch }) => dispatch(INCREMENT)
-export const decrement = ({ dispatch }) => dispatch(DECREMENT)
+export const increment = ({ dispatch }) => dispatch('increment')
+export const decrement = ({ dispatch }) => dispatch('decrement')
 
 export const incrementIfOdd = ({ dispatch, state }) => {
   if ((state.count + 1) % 2 === 0) {
-    dispatch(INCREMENT)
+    dispatch('increment')
   }
 }
 
 export const incrementAsync = ({ dispatch }) => {
   setTimeout(() => {
-    dispatch(INCREMENT)
+    dispatch('decrement')
   }, 1000)
 }

+ 6 - 2
examples/counter-hot/vuex/getters.js

@@ -1,6 +1,10 @@
-export function recentHistory (state) {
+export const count = state => state.count
+
+const limit = 5
+
+export const recentHistory = state => {
   const end = state.history.length
-  const begin = end - 5 < 0 ? 0 : end - 5
+  const begin = end - limit < 0 ? 0 : end - limit
   return state.history
     .slice(begin, end)
     .toString()

+ 0 - 2
examples/counter-hot/vuex/mutation-types.js

@@ -1,2 +0,0 @@
-export const INCREMENT = 'INCREMENT'
-export const DECREMENT = 'DECREMENT'

+ 7 - 10
examples/counter-hot/vuex/mutations.js

@@ -1,12 +1,9 @@
-import { INCREMENT, DECREMENT } from './mutation-types'
+export const increment = state => {
+  state.count++
+  state.history.push('increment')
+}
 
-export default {
-  [INCREMENT] (state) {
-    state.count++
-    state.history.push('increment')
-  },
-  [DECREMENT] (state) {
-    state.count--
-    state.history.push('decrement')
-  }
+export const decrement = state => {
+  state.count--
+  state.history.push('decrement')
 }

+ 13 - 4
examples/counter-hot/vuex/store.js

@@ -1,6 +1,8 @@
 import Vue from 'vue'
 import Vuex from '../../../src'
-import mutations from './mutations'
+import * as getters from './getters'
+import * as actions from './actions'
+import * as mutations from './mutations'
 
 Vue.use(Vuex)
 
@@ -11,14 +13,21 @@ const state = {
 
 const store = new Vuex.Store({
   state,
+  getters,
+  actions,
   mutations
 })
 
 if (module.hot) {
-  module.hot.accept(['./mutations'], () => {
-    const mutations = require('./mutations').default
+  module.hot.accept([
+    './getters',
+    './actions',
+    './mutations'
+  ], () => {
     store.hotUpdate({
-      mutations
+      getters: require('./getters'),
+      actions: require('./actions'),
+      mutations: require('./mutations')
     })
   })
 }

+ 3 - 1
examples/counter/Counter.vue

@@ -12,7 +12,9 @@
 import { mapGetters, mapActions } from 'vuex'
 
 export default {
-  computed: mapGetters(['count']),
+  computed: mapGetters([
+    'count'
+  ]),
   methods: mapActions([
     'increment',
     'decrement',

+ 9 - 4
examples/counter/store.js

@@ -23,6 +23,8 @@ const mutations = {
   }
 }
 
+// actions are functions that causes side effects and can involve
+// asynchronous operations.
 const actions = {
   increment: ({ dispatch }) => dispatch('increment'),
   decrement: ({ dispatch }) => dispatch('decrement'),
@@ -31,10 +33,13 @@ const actions = {
       dispatch('increment')
     }
   },
-  incrementAsync ({ dispatch, state }) {
-    setTimeout(() => {
-      dispatch('increment')
-    }, 1000)
+  incrementAsync ({ dispatch }) {
+    return new Promise((resolve, reject) => {
+      setTimeout(() => {
+        dispatch('increment')
+        resolve()
+      }, 1000)
+    })
   }
 }
 

+ 2 - 2
src/helpers.js

@@ -11,8 +11,8 @@ export function mapGetters (getters) {
 export function mapActions (actions) {
   const res = {}
   normalizeMap(actions).forEach(({ key, val }) => {
-    res[key] = function () {
-      return this.$store.call(val)
+    res[key] = function (...args) {
+      return this.$store.call(val, ...args)
     }
   })
   return res

+ 7 - 7
src/index.js

@@ -22,7 +22,6 @@ class Store {
       state = {},
       modules = {},
       plugins = [],
-      getters = {},
       strict = false
     } = options
 
@@ -39,7 +38,7 @@ class Store {
     this.dispatch = bind(this.dispatch, this)
 
     // init state and getters
-    extractModuleGetters(getters, modules)
+    const getters = extractModuleGetters(options.getters, modules)
     initStoreState(this, state, getters)
 
     // apply root module
@@ -125,8 +124,8 @@ class Store {
         res = Promise.resolve(res)
       }
       return res.catch(err => {
-        console.warn(`[vuex] error in Promise returned from action ${type}`)
-        console.warn(err)
+        console.warn(`[vuex] error in Promise returned from action "${type}":`)
+        console.error(err)
       })
     })
   }
@@ -196,7 +195,7 @@ class Store {
     this.module([], options, true)
 
     // update getters
-    const getters = extractModuleGetters(newOptions.getters || {}, newOptions.modules)
+    const getters = extractModuleGetters(newOptions.getters, newOptions.modules)
     if (Object.keys(getters).length) {
       const oldVm = this._vm
       initStoreState(this, this.state, getters)
@@ -238,8 +237,8 @@ function initStoreState (store, state, getters) {
   Vue.config.silent = silent
 }
 
-function extractModuleGetters (getters, modules, path = []) {
-  if (!modules) return
+function extractModuleGetters (getters = {}, modules = {}, path = []) {
+  if (!modules) return getters
   Object.keys(modules).forEach(key => {
     const module = modules[key]
     if (module.getters) {
@@ -254,6 +253,7 @@ function extractModuleGetters (getters, modules, path = []) {
     }
     extractModuleGetters(getters, module.modules, path.concat(key))
   })
+  return getters
 }
 
 function enableStrictMode (store) {