引言

最近在写博客系统门户，在写登录部分的时候，由于把各个页面元素都抽成了单个组件，所以在实现登录和退出登陆的时候，组件之间的通讯较为繁琐，查询了一下，发现可以通过vuex实现管理层，相较于跳转之后刷新页面的用户体验要好很多，下面简单记录一下。

vue.js

先提一下vue

官网地址：https://vuejs.org/

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

nuxt.js

再提一下nuxt

官网地址：https://zh.nuxtjs.org

Nuxt.js 是一个基于 Vue.js 的轻量级应用框架,可用来创建服务端渲染 (SSR) 应用,也可充当静态站点引擎生成静态站点应用,具有优雅的代码结构分层和热加载等特性。

vuex

最后提一下vuex

官网地址：https://vuex.vuejs.org/zh/

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension (opens new window)，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

正文

下面梳理一下实现的流程

安装vuex

npm install vuex --save
shell

安装promise

npm install es6-promise --save 
shell

引入vuex

在plugins目录下，创建/store/index.js 文件，写入

    import 'es6-promise/auto'
    import Vue from 'vue'
    import Vuex from 'vuex'
    import * as  api from "../../api/api"
    Vue.use(Vuex)
    const store = new Vuex.Store({
		state: {
     	  userInfo: null
        },
		mutations: {
 	 	  getUserInfo(state) {
  		    api.checkToken().then(res=>{
  	           if(res.code==2003){
  		 	       state.userInfo =res.data
  	   	    }else {
 	 	 	       state.userInfo=null
 	 	   	}
  	   	 })
	        }
	     }
 	})
	export  default  store
javascript

在nuxt.config.js中配置

      plugins: [
          '@/plugins/store/index.js'
     ]
javascript

用户信息显示页面引入

    <template>
        <user-info  :user-info="userInfo" />
    </template>
     <script>
	  import store from "../plugins/store";

 	 export default {
   	 computed:{
    	  userInfo(){
      	  console.log(store.state.userInfo)
     	   return store.state.userInfo
    	   }
        }
      }
	</script>
javascript

登录和退出登录时和时发起commit

   methods: {
        //发起登录
     doLogin() {
       api.doLogin(this.login.captcha, this.captcha_key, this.IsPC(), {
         userName: this.login.userName,
         password: this.login.password
       }).then(res => {
           //处理结果
           let code = res.code
           if (code == 2999) {
             this.$Message.success('Success!');
             //跳转
             if (this.$route.query.redirect) {
               let path = this.$route.query.redirect
               this.$router.push({
                 path: path
               });  
             } else {
               this.$router.push({name: 'index'});
             }
           //发起commit，调用getUserInfo方法，获取用户信息
           store.commit("getUserInfo")
        })
      },
      //退出登录
      doLogout(){
          this.$Modal.confirm({
           title:"Warning!",
           content:"确定要退出登陆嘛？",
           onOk(){
             api.doLogout().then(res=>{
               this.$message.success(res.message)
               //发起commit，调用getUserInfo方法，获取用户信息
               store.commit("getUserInfo")
             })
           }
         })
       }
    }
javascript

methods: {
        //发起登录
     doLogin() {
       api.doLogin(this.login.captcha, this.captcha_key, this.IsPC(), {
         userName: this.login.userName,
         password: this.login.password
       }).then(res => {
           //处理结果
           let code = res.code
           if (code == 2999) {
             this.$Message.success('Success!');
             //跳转
             if (this.$route.query.redirect) {
               let path = this.$route.query.redirect
               this.$router.push({
                 path: path
               });  
             } else {
               this.$router.push({name: 'index'});
             }
           //发起commit，调用getUserInfo方法，获取用户信息
           store.commit("getUserInfo")
        })
      },
      //退出登录
      doLogout(){
          this.$Modal.confirm({
           title:"Warning!",
           content:"确定要退出登陆嘛？",
           onOk(){
             api.doLogout().then(res=>{
               this.$message.success(res.message)
               //发起commit，调用getUserInfo方法，获取用户信息
               store.commit("getUserInfo")
             })
           }
         })
       }
    }

解释

上文通过store/index.js引入vuex，定义了一个简单的store，其中state的对象userInfo用于存储用户信息，并且定义了一个mutation: getUserInfo

getUserInfo的作用在于获取用户信息并写入state.userInfo

更改 Vuex的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的事件类型 (type) 和一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数：

    const store = new Vuex.Store({
		state: {
     	  userInfo: null
        },
		mutations: {
 	 	  getUserInfo(state) {
  		    api.checkToken().then(res=>{
  	           if(res.code==2003){
  		 	       state.userInfo =res.data
  	   	    }else {
 	 	 	       state.userInfo=null
 	 	   	}
  	   	 })
	        }
	     }
 	})
javascript

上述工作完成以后，便可以实现组件间、不同页面间的通讯了。

通过 store.state 来获取状态对象

   userInfo(){
      console.log(store.state.userInfo)
      return store.state.userInfo
    }
javascript

通过 store.commit 方法触发状态变更：

    store.commit("getUserInfo")
javascript

成果展示

Vuex实现组件间通讯