vuex/init

index.js

import Vue from 'vue';
import Vuex from 'vuex';
import 'es6-promise/auto';

import state from './State';
import mutations from './Mutations';
import actions from './Actions';
import getters from './Getters';
import moduleA from './ModuleA';
import myPlugins from './Plugins';

Vue.use(Vuex)

export default new Vuex.Store({
    state,
    mutations,
    actions,
    getters,
    plugins:[myPlugins],
    modules: {
        moduleA,
        moduleB: {
            namespaced: true,
            state: {
                countB: 100
            },
            mutations: {
                incrementB(state) {
                    state.countB++
                },
                decrementB(state) {
                    state.countB--
                }
            }
        }
    }
})
if (module.hot) {
    // 使 action 和 mutation 成为可热重载模块
    module.hot.accept(['./State', './Mutations', './Actions', './Getters', './ModuleA'], () => {
        // 获取更新后的模块
        // 因为 babel 6 的模块编译格式问题，这里需要加上 `.default`
        const newState = require('./State').default
        const newMutations = require('./Mutations').default
        const newActions = require('./Actions').default
        const newGetters = require('./Getters').default
        const newModuleA = require('./ModuleA').default
        // 加载新模块
        store.hotUpdate({
            state: newState,
            mutations: newMutations,
            actions: newActions,
            getters: newGetters,
            modules: {
                moduleA: newModuleA
            }
        })
    })
}

state.js

export default {
    count: 0,
    product: {},
    msg1:'',
    msg2:''
}

mutations.js

export default {
    increment(state,{num}){
        state.count+=num
    },
    decrement(state,num){
        state.count-=num
    },
    setProduct(state,payload){
        state.product=payload
    },
    updateMsg1(state,info){
        state.msg1=info
    },
    updateMsg2(state,info){
        state.msg2=info
    }
}

actions.js

import axios from 'axios';
export default {
    incrementActions({commit},num){
        commit('increment',num)
    },
    decrementActions({commit},num){
        commit('decrement',num)
    },
    setProductActions({commit},{payload}){
        axios.get("http://iwenwiki.com/api/music/list.php",{
            params:payload
        })
        .then(res=>{
            console.log(res.data)
            commit('setProduct',res.data.billboard.name)
        })
        
    }
}

getters.js

export default {
    getCount:(state)=>{
        if(state.count<0){
            return 0;
        }else{
            return state.count
        }
    }
}

plugins.js

const myPlugin = store => {
    store.subscribe((mutation,state)=>{
        console.log(mutation.type,mutation.payload)
    })
}
export default myPlugin;

moduleA.js

export default {
    namespaced:true,
    state:{
        countA:10
    },
    mutations:{
        incrementA(state,{num}){
            state.countA+=num;
        },
        decrementA(state,{num}){
            state.countA-=num;
        }
    },
    actions:{
        incrementAActions({commit},num){
            commit('incrementA',num)
        },
        decrementAActions({commit},num){
            commit('decrementA',num)
        }
    },
    getters:{
        getCountA:(state)=>{
            if(state.countA<0){
                return 0;
            }else{
                return state.countA;
            }
        }
    }
}