故事：其实很久一段时间想通过一个简单的项目学习vuex以及vue组件里面的细节知识点因此在工作之余写了一个非常简单以及粗暴的案例来加深记忆，案例涉及到 vuex localstorage 登录拦截 等

vuex模块化的使用：

安装vuex 并且建立vuex文件的结构

npm install vuex --save

在src文件夹下新建 store夹然后新建index.js type.js 以及子文件夹modules 目录结构如图

type.js 定义常量使用常量代替mustation事件类型;

modules 文件夹里的global.js ，user.js 分别是我定义的模块化文件分别代表账户中心和全局vuex模块，每个模块都有自己的 state actions getters mutations;

index.js 挂载store如下

－－－－－－－－－－－－－－index.js
import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
import global from './modules/global'

Vue.use(Vuex)

const store = new Vuex.Store({
 modules: {
  user,
  global
 }
})

export default store;

new Vuex.Store({}) 表示创建一个Vuex实例，通常情况下，他需要注入到Vue实例里. Store是Vuex的一个核心方法，字面上理解为“仓库”的意思。Vuex Store是响应式的，当Vue组件从store中读取状态（state选项）时，若store中的状态发生更新时，他会及时的响应给其他的组件（类似双向数据绑定）而且不能直接改变store的状态，改变状态的唯一方法就是，显式地提交更改（mutations选项）

type.js 如下

-------------------------type.js
/**
 * 
 * @authors Your Name (you@example.org)
 * @date    2018-08-27 19:46:08
 * @version $Id$
 */

/*user 用户*/
export const IS_LOGIN      = 'IS_LOGIN'             //设置用户信息


/*global全局*/

export const GLOBAL_BGCOLOR = 'GLOBAL_BGCOLOR'        //设置主题颜色

user.js 如下

-----------------------------user.js
/**
 * 
 * @authors Your Name (you@example.org)
 * @date    2018-08-27 19:55:37
 * @version $Id$
 */
import * as types from '../type'
import ajax from '@/fetch/index'

const state = {
 isLogin: false

}

const actions = {
 isLogin({ commit },res) {
  commit(types.IS_LOGIN, res)
 }
}

const getters = {
 isLogin: state => state.isLogin,
}

const mutations = {
    [types.IS_LOGIN](state, res) {
        state.isLogin = res.isLogin
    }
}

export default {
 state,
 actions,
 getters,
 mutations
}

global.js 如下

---------------global.js
/**
 * 
 * @authors Your Name (you@example.org)
 * @date    2018-08-28 17:54:40
 * @version $Id$
 */

/*通用配置*/
import * as types from '../type'
import {Local} from '@/storage'
const state = {
 bgColor:  Local.get('bgColor') || "blue"
}

const actions = {
 setbgColor({commit},color) {
  commit(types.GLOBAL_BGCOLOR,color)
 }
}


const getters = {
 bgColor: state => state.bgColor
}


const mutations = {
 [types.GLOBAL_BGCOLOR](state, color) {
        state.bgColor = color
        Local.set('bgColor',color)
    }
}


export default {
    state,
    actions,
    getters,
    mutations
}

在main.js 导入store下的index.js文件并且注册

--------------------main.js
import Vue from 'vue'
import App from './App'
import router from './router/permission'
import store from './store'
Vue.config.productionTip = false

/*全局组件*/
import commonComponents from './common-components.js'
Vue.use(commonComponents)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

Hello.vue 如下

<template>
 <div>
  <button type="button" style="margin-top: 20px" @click="getLogin">获取登录状态</button><br/>
  <button type="button" style="background:#f60;margin-top: 20px;color:#fff;" @click="setTheme('orange')">设置主题f60</button><br/>
  <button type="button" style="background:#2577e3;margin-top: 20px;color:#fff;" @click="setTheme('blue')">设置主题f60</button><br/>

  <router-link tag="div" to="/user">
   <button type="button" style="margin-top: 20px">去账户中心</button>
  </router-link>
 </div>
</template>

<script>
 import ajax from '@/fetch/index'
 import {Cookie} from '@/storage/index'
 import { mapState, mapGetters ,mapActions,mapMutations} from 'vuex'
 export default {
  data() {
   return {
   }
  },
  mounted() {
  },
  methods: {
   getLogin() {
    console.log(this.isLogin)
    //console.log(this.$store.getters.isLogin)
   },
   setTheme(color) {
    this.$store.dispatch('setbgColor',color)
    //console.log(this.$store.getters.bgColor)
   }
  },
  created() {
   const _this = this;
   
   ajax.get('apis/register/wap/member/check',{})
     .then(function(res) {
      _this.$store.dispatch('isLogin',{"isLogin": res.data.result.isLogin})
     })
  },
  computed: {
   ...mapGetters([
     'isLogin'
    ])
  }
 }
</script>

<style>
 button {
  border: none;
  width: 120px;
  height: 40px;
  cursor: pointer;
  outline: none;
 }
 .button {
  display:inline-block;
  background:#f60;margin-top: 20px;
  color:#fff;
  height:40px;
  width:120px;
  text-decoration: none;
  line-height: 40px;
  text-align: center;
 }
</style>

注意：this.$store.dispatch('setbgColor',color) 表示分发actions 或者通过辅助函数 mapActions 如下

methods: {
    ...mapActions({
        setTheme: "setbgColor"
    })
}

这里会默认传参数color

同样 this.$store.getters.isLogin 可以通过辅助函数 mapGetters 如下

computed: {
    ...mapGetters([
            'isLogin'
        ])
}

这里通过辅助函数将 this.isLogin 映射到 this.$store.getters.isLogin 如下

methods: {
    getLogin() {
        console.log(this.isLogin)
        <!-- 相当于 -->
        console.log(this.$store.getters.isLogin)
    }
}

知识点：

页面中通过localStorage 实现换肤功能

在src目录下新建 storage文件夹用来封装 localStrorage 和 cookie 等

-------------------------------index.js
const ls = window.localStorage;
export const Local = {
    get(key) {
        if (key) return JSON.parse(ls.getItem(key))
        return null
    },
    set(key, val) {
        const setting = arguments[0]
        if (Object.prototype.toString.call(setting).slice(8, -1) === 'Object') {
            for (const i in setting) {
                ls.setItem(i, JSON.stringify(setting[i]))
            }
        } else {
            ls.setItem(key, JSON.stringify(val))
        }
    },
    remove(key) {
        ls.removeItem(key)
    },
    clear() {
        ls.clear()
    }
}

完成toast组件，以及组件管理

--------------------Toast/index.vue

<template>
	<transition name="fade">
		<div class="toast-wrap" v-show="show">
			<span>{{msg}}</span>
		</div>
	</transition>
</template>

<script>
	export default {
		data() {
			return {
				msg: "",
				show: true
			}
		},
		methods: {

		}
	}

</script>


<style>
 	.fade-enter-active, .fade-leave-active {
		transition: opacity .3s;
	}
	.fade-enter, .fade-leave {
	 	opacity: 0;
	}
	.toast-wrap {
		position: fixed;
		max-width: 80%;
		left: 50%;
		top:50%;
		padding: 20px;
		border-radius: 10px;
		text-align: center;
		transform: translate3d(-50%,-50%,0);
		color: #fff;
		background: rgba(0, 0, 0, 0.7);
		font-size: 14px;
	}
</style>

----------------------------------Toast/index.js
/**
 * 
 * @authors Your Name (you@example.org)
 * @date    2018-08-30 14:26:05
 * @version $Id$
 */

import Vue from 'vue'
import ToastComponent from './index.vue'

let initComponent = null;
let timer = null;

const merge = ($data, option) => {
    for ( let prop in option) {
        if ($data.hasOwnProperty(prop)) {
            $data[prop] = option[[prop]]
        }
    }
};

/*构造器*/
let ToastConstructor = Vue.extend(ToastComponent);


const Toast = (option = {}) => {
	if(initComponent) {
		initComponent.show = true
		if (timer) {
	    	clearInterval(timer)
	    }
	    initComponent.$el.removeEventListener('transitionend', initComponent.destroyeInitComponent)
	}else {
		/*通过 new 创建组件*/
	    initComponent = new ToastConstructor({
	    	el: document.createElement('div')
	    });
	    //如果没有 挂载div 可以 initComponent.$mount();
	    if(typeof option !== 'object') {
			initComponent.msg = option;
		}else {
			merge(initComponent.$data, option)
		}
		document.querySelector(option.container || 'body').appendChild(initComponent.$el);
	    
	    
	}
	Vue.nextTick(() => {
		initComponent.show = true
		timer = setTimeout(() => {
			initComponent.close()
		},2000)

	})
	return new Promise((resolve,reject) => {
		resolve()
	})
}

ToastConstructor.prototype.close = function() {
	this.show = false;
	this.$el.addEventListener('transitionend', this.destroyeInitComponent.bind(this))
}

/*销毁组件*/
ToastConstructor.prototype.destroyeInitComponent  = function() {
	initComponent = null;
	this.$destroy(true)
	this.$el.removeEventListener('transitionend', this.destroyeInitComponent)
  	this.$el.parentNode.removeChild(this.$el)
}
export default Toast

新建common-components.js

----------------------------------common-components.js
/**
 * 
 * @authors Your Name (you@example.org)
 * @date    2018-08-30 14:19:20
 * @version $Id$
 */

import Toast from '@/components/Toast'


const install = Vue => {
	//Vue.prototype.$toast = Toast
	Vue.$toast = Toast;
	Vue.prototype.$toast = Vue.$toast
}

export default install

在main.js中引用

/*全局组件*/
import commonComponents from './common-components.js'
Vue.use(commonComponents)

调用 toast

                               Vue.prototype.$toast("请先登录")
				.then(() => {
					console.log('回调')
				})

登陆拦截

在 router下新建 permission.js

/**
 * 
 * @authors Your Name (you@example.org)
 * @date    2018-08-29 15:05:17
 * @version $Id$
 */
import store from '../store'
import Vue from 'vue'
import { router } from './index'

router.beforeEach((to, from, next) => {
	if(to.meta.login) {
		if(store.state.user.isLogin == "1") 
			next()
		else {
			Vue.prototype.$toast("请先登录")
				.then(() => {
					console.log('回调')
				})
			return
		}

	}else if(to.meta.page) {
		next()
	}
	
})

router.afterEach((to, from) => {
	document.title = to.name
})

export default router

axios 封装

/**
 * 
 * @authors Your Name (you@example.org)
 * @date    2018-08-28 10:04:37
 * @version $Id$
 */

import axios from 'axios';
import qs from 'qs'

axios.defaults.withCredentials = true 
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';

// http request 拦截器  发送时
axios.interceptors.request.use(config => {
    return config
}, err => {
    return Promise.reject(err)
})

// http response 拦截器  相应时
axios.interceptors.response.use(response => {
    console.log(response.data.result)
    return response
}, err => Promise.resolve(err.response))


const get =  function (url, params) {
    return new Promise((resolve, reject) => {
    	axios({
    		method: "GET",
    		url,
    		params
    	}).then(function(res){
    		resolve(res);
    	})
    })
}

const post =  function (url, params) {
    return new Promise((resolve, reject) => {
    	axios({
    		method: "POST",
    		url,
    		params
    	}).then(function(res){
    		resolve(res);
    	})
    })
}

export default {
	get,
	post
}