vuex之store拆分即多模塊狀態管理

一般做項目的時候我們有公用的參數，還有各模塊自己的參數

一：首先是公用參數的拆分城四個JS

 

 

 然后states.js如下

export default {
    count:0,
    name: '張三'
}

mutations.js如下

export default {
    addName(state,obj){
        state.name=obj.name;
        state.count=obj.count;
    }
  }

actions.js如下

import axios from 'axios'
export default {
    addNameAction({commit}){
        axios.get("http://localhost/ddd")
        .then(res=>{
            commit('addName',{name:res.data.name,count:res.data.count})
        }).catch(error=>{
            console.log(error)
        })
    }
}

接下來就是導入store.js如下

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
import  '../mock.js'
import state from './states.js'
import mutations from './mutations.js'
import actions from './actions.js'
// Vue.prototype.$http=axios;
Vue.use(Vuex);
export default new Vuex.Store({
    state,
     mutations,
    actions
})

這樣我們就完成了，vue調用還像之前的調用

二：業務中一個模塊的導入

我們新建個modules的文件夾，然后再新建個JS，名字自己起,我就叫dataCenterChiren

 

 dataCenterChiren.js代碼如下

export default {
    state:{
        minority:"漢族"
    },
    mutatons:{},
    actions:{},
    getters:{}
  }

store.js導入如下

 

 業務中vue調入是這么寫的

 

 是不是如此簡單，但是剛摸索還是折騰了一點時間的。O(∩_∩)O哈哈~