Vuex——配置、模块化、热更替

import Vuex from 'vuex'
import defaultState from './state/state.js'
import mutations from './mutations/mutations.js'
import getters from './getters/getters.js'
import actions from './actions/actions.js'

const isDev = process.env.NODE_ENV === 'development'

export default () => {
  const store = new Vuex.Store({
    strict: isDev, // 只能在开发环境使用，限制state在mutation之外的修改
    state: defaultState, // 数据
    getters, // 和computed类似
    mutations, // 修改state的操作
    actions, // 异步操作
    plugins: [
      (store) => {
        console.log('my vuex plugins')
      }
    ]
    //模块化，组件中使用'a/..'
    // modules:{
    //   a:{
    //     namespaced:true, //命名空间 actions/mutations/getters 不会冲突
    //     state:{
    //       text:'modules-a'
    //     },
    //     getters:{
    //       textPlus(state,getters,routeState){
    //         return state.text + routeState.count+routeState.b.text
    //       }
    //     },
    //     mutations:{
    //       updateText(state,text){
    //         state.text=text
    //       }
    //     },
    //     actions:{
    //       add({state,commit,rootState},data){
    //         commit('updateText',data.addtext)//本模块中查找updateText
    //         //commit('updateCount',56789,{root:true})//调用全局的mutation
    //       }
    //     }
    //   },
    //   b:{
    //     namespaced:true,
    //     state:{
    //       text:'modules-b'
    //     },
    //     actions:{
    //       testAction({commit}){
    //         commit('a/updateText','test-in-b',{root:true})//调用其他模块的mutation
    //       }
    //     }
    //   }
    // }
  })

  // vuex的热更替
  if (module.hot) {
    module.hot.accept([
      './state/state.js',
      './mutations/mutations.js',
      './getters/getters.js',
      './actions/actions.js'
    ], () => {
      const newState = require('./state/state.js').default
      const newMutations = require('./mutations/mutations.js').default
      const newGetters = require('./getters/getters.js').default
      const newActions = require('./actions/actions.js').default

      store.hotUpdate({
        state: newState,
        mutations: newMutations,
        actions: newActions,
        getters: newGetters
      })
    })
  }

  return store
}

一些其他api

// store.registerModule({ //动态添加模块
// })

// 相当于getter
// store.watch((state)=>state.count+1,(newCount)=>{
//   console.log('new count watched , '+newCount)
// })

// mutation被调用时
// store.subscribe((mutation,state)=>{
//   console.log(mutation.type)
//   console.log(mutation.payload)
// })

// action被调用时
// store.subscribeAction((action,state)=>{
//   console.log(action.type)
//   console.log(action.payload)
// })