vuex模块化布局

1.login目录下边新建index.js,存储登录模块的状态

Const  state = {   

     Name:’haha'

}

const   getters = {       

   NewName(state,getters,rootState,rootGetters){          

         Return state.name + arg         

    }     

 }

Const    mutations = {          

      Change_name(state,arg) {          

          state.name = arg          

     }        

}

Const    actions = {          

       ChangeName( {commit, getters,rootstate,rootGetters}, arg) {            

                Commit(‘change_name’，arg)          

      }      

};

#index.js Export default {        

Namespaced: true,  #模块局部命名空间      

       State,      

       Mutations,      

      Actions,      

      Getters    

}

2.src目录下新建store.js，这是根store,通过modules属性引入login模块

import Vue from "vue";

import Vuex from "vuex";

Vue.use(Vuex);

// 引入login 模块

import login from "./login"

export default new Vuex.Store({  

 // 通过modules属性引入login 模块。   

modules: {     

       login: login   

    }

})

3.在main.js中引入store, 并注入到vue 根实例中。

import Vue from 'vue'

import App from './App.vue'

// 引入store

import store from "./store"

new Vue({ el: '#app', store,

       // 注入到根实例中。

       render: h => h(App)

})