Vuex使用，自动注册函数

目录结构

文件内容

user.js

export default {
    namespaced: true,
    state: { 
    	userName:'',
    	userPwd:''
    },
    getters: {
		toName: (state, getters)=>{
			return {name:state.userName,info:getters.addPwd}
		},
		addPwd: state => {
			return state.userName + '-' + state.userPwd
		}
	},
    mutations: {
		SET_USERNAME: (state,val) => {
			state.userName = val
		}
	},
    actions: {
    	//登录 暴露(mutations的commit，用户传后台的用户信息)
		login({ commit }, userInfo) {
			//获取账号密码
		    const { username, password } = userInfo
		    return new Promise((resolve, reject) => {
		      	login({ loginname: username.trim(), pwd: password }).then(res => {
			        if(res.success){
			        	//登录成功，用户名写入Vuex
		              	commit('SET_USERNAME', username);
			          	resolve()
			        }
			        reject()
		      	}).catch(error => {
		        	reject(error)
		      	})
		    })
		},
	}
};

getters.js

export default {
	userName:state => {
		//格式：state.[模块名称（模块文件名）].[属性名]
		state.user.userName		
		
	}
}

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'

Vue.use(Vuex)

// https://webpack.js.org/guides/dependency-management/#requirecontext
const modulesFiles = require.context('./modules', true, /\.js$/)	//内嵌所有模块

// you do not need `import app from './modules/app'`
// it will auto require all vuex module from modules file
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  // set './app.js' => 'app'
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  const value = modulesFiles(modulePath)
  modules[moduleName] = value.default
  return modules
}, {})	//模块注册

const store = new Vuex.Store({
  modules,
  getters
})

export default store

main.js

import store from './store'

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

核心方法+ 辅助函数的使用

传送门…Go