vuex实现热重载

目录结构如下：

app.js

import Vue from 'vue'
import store from './store.js'
import CounterControls from './CounterControls.vue'

new Vue({
  el: '#app',
  store,
  render: h => h(CounterControls)
})

CounterControls.vue

store.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state = {
  count: 0,
  history: []
}
const limit = 5
//getters就相当于计算属性computed
//将state和geeter里的全放到getter里
const getters = {
  recentHistory(state){
    const end = state.history.length
    const begin = end - limit > 0 ? end - limit : 0
    return state.history.slice(begin, end)
  },
  count(state){
    return state.count
  }
}
const mutations = {
  increment(state){
    state.count++
    state.history.push('increment')
  },
  decrement(state){
    state.count--
    state.history.push('decrement')
  },
  incrementIfOdd(state){
    if((state.count + 1) % 2 == 0){
      state.count++
    }
  }
}
//将mutations里的操作全部在actions里触发
const actions = {
  increment({commit}){
    commit('increment')
  },
  decrement({commit}){
    commit('decrement')
  },
  incrementIfOdd({commit}){
    commit('incrementIfOdd')
  },
  incrementAsync({commit}){
    setTimeout(()=>{
      commit('increment')
    },1000)
  }
}
const store = new Vuex.Store({
  state,
  getters,
  mutations,
  actions
})
export default store;

现在就实现了点击页面上的加减按钮每次在下方的数组里记录你最新五次的点击的按钮类型，不管你点击多少次都只会在当前数组里显示最新的五条。

模块化，实现热重载（热重载必须代码模块化）

在当前目录下建一个目录store，然后将你目录里的store.js改名为index.js，之后新建一个getter.js和action.js和mutations.js然后将index.js里的getter/action/mutations分别放到对应的js里，将他们导出，然后在index.js引入就实现了模块化
当前的目录结构如下：

actions.js

const actions = {
    increment({commit}){
      commit('increment')
    },
    decrement({commit}){
      commit('decrement')
    },
    incrementIfOdd({commit}){
      commit('incrementIfOdd')
    },
    incrementAsync({commit}){
      setTimeout(()=>{
        commit('increment')
      },1000)
    }

}
export default actions

getter.js

const limit = 5

//getters就相当于计算属性computed
//将state和geeter里的全放到getter里
const getters = {
    recentHistory(state){
      const end = state.history.length
      const begin = end - limit > 0 ? end - limit : 0
      return state.history.slice(begin, end)
    },
    count(state){
      return state.count
    }
}

export default getters

mutations.js

//将mutations里的操作全部在actions里触发
const mutations = {
    increment(state){
      state.count++
      state.history.push('increment')
    },
    decrement(state){
      state.count--
      state.history.push('decrement')
    },
    incrementIfOdd(state){
      if((state.count + 1) % 2 == 0){
        state.count++
      }
    }
}

export default mutations

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getter.js'
import mutations from './mutations.js'
import actions from './actions.js'

Vue.use(Vuex)
const state = {
  count: 0,
  history: []
}

const store = new Vuex.Store({
  state,
  getters,
  mutations,
  actions
})
export default store;

然后将app.js里引入的store.js改成store

import store from './store'

使用热重载，当前模块里只要有一个文件的数据发生变化，webpack就会把你整个文件都重新加载，比如
我们当前页面存了七条我们的历史数据

现在是在页面上显示五条，如果我想让他只显示三条，对它里面的getter.js进行更改，页面的所有数据都会重新渲染，之前的history也会清空，但我不希望它数据清空，所以我就是用热重载
在index.js里添加

if(module.hot){
  //监听这三个js文件
  module.hot.accept(['./getter.js','./actions.js','./mutations.js'],()=>{
  //数据变化了，就去热重载
    store.hotUpdate({
      //getters的值为新的getter.js文件
      getters: require('./getter.js').default,
      mutations: require('./mutations.js').default,
      actions: require('./actions.js').default
    })
  })
}

加了上面代码后，我们在对文件更改，你的页面的数据不会去重置，当前页面显示五条历史数据，后台有八条

当你把

//把const limit = 5改成
const limit = 3