写在文章前：
在初版开端完成cnode的基本功用后，本来是用当地存储的存储用户登录胜利返回的用户的基本信息，用于背面的复兴功用，检察信息等操纵须要的用户基本信息的数据。然则总的来说以为当地贮存的计划不太抱负（个人主意），所以想引入vuex来存储用户信息，另有一些跨组件的状况和数据。
什么是vuex，干嘛用的？
简朴的引见一下我明白的vuex是什么东西，因为我们晓得vue的组件子父之间是能够同过props完成数据的单向和双向通报，然则我们能够常常碰到的营业场景是一个组件的状况发作转变须要在另一个与他不相关的组件举行相应，这个时刻假如我们没做全局变量就没办法搞了，所以说vuex总的来说就是一个全局的状况治理。（我是这么以为的）
发起浏览文档
关于vuex的基本用法请拜见中文API
在项目中运用vuex
如今直接上手完成一个功用把登录胜利的用户信息保留在vuex中，这个功用是基于你看过文档并开端了解了vuex，晓得state，mutation这些基本概念，因为API的文档中的例子只是个简朴的demo，所以我写了这个功用更贴切一个项目中现实的场景。（这里就不引见那些基本概念了，因为API一定引见得比我细致）
1.初始化
竖立一个文件 store.js代码以下。state定义须要状况的参数变量，mutation（状况变动）用于转变state的状况，注重vuex中是不能直接转变state中的状况的，一定要借助于mutation的事宜分发。mutation的要领能够第一个参数一定是state，背面也能够挑选带参，两种本例子下面都有定义。
"use strict";
import Vue from 'vue'
import Vuex from 'vuex';
Vue.use(Vuex);
const state = {
// 页面翻开默认设置登录状况为否
isLogin : false,
// 保留登录信息
userInfo : {
'loginname' : '',
'avatar' : '',
'id' : '',
'accesstoken' : ''
}
}
const mutations = {
// 设置登录
ISLOGIN (state) {
state.isLogin = true;
},
// 设置登录用户信息
SETUSERINFO (state, name, avatar, id, accesstoken) {
state.userInfo.loginname = name;
console.log(state.userInfo.loginname);
state.userInfo.avatar = avatar;
state.userInfo.id = id;
state.userInfo.accesstoken = accesstoken;
}
}
export default new Vuex.Store({
state,
mutations
})
2.设置state状况
竖立一个action.js代码以下，用于用户分发mutation的事宜。能够有些人会迷惑为何要多写这个文件来分发mutation的事宜，是应为我们的mutation必需是同步实行，假如在mutation中举行回调，根本就没法肯定究竟什么时刻能实行谁人回调函数。而在action中举行事宜的分发就能够举行异步操纵。
/**
*修正用户登录状况为已登录
**/
export const isLogin = ({dispatch}) => {
dispatch('ISLOGIN');
}
/**
*设置用户的登录信息
*参数 name用户名 avatar用户头像 id用户id accesstoken用户登录标识
**/
export const setUserInfo = ({dispatch}, name, avatar, id, accesstoken) => {
dispatch('SETUSERINFO', name, avatar, id, accesstoken);
}3.猎取state状况
竖立一个getters.js代码以下，用户用户猎取state中的状况。
//猎取用户的登录状况
export const getLoginState = (state) => {
return state.isLogin;
}
//猎取登录用户的信息
export const getUserInfo = (state) => {
return state.userInfo;
}4.在组件中挪用vuex
这里注重一点在子父组件中挪用vuex区分的一点是父组件一定要定义store:store，子组件随便。
import store from '../vuex/store';
import nvHeader from '../components/header.vue';
import {isLogin, setUserInfo} from '../vuex/actions';
export default {
data : function(){
return {
strToken : ''
}
},
methods : {
login : function() {
let rqdata = {
'accesstoken' : this.strToken
}
$.post('https://cnodejs.org/api/v1/accesstoken', rqdata, (data) => {
if(data){
// 登入胜利转变isLogin的状况为true
this.userLogin();
console.log(this.userLoginState);
this.setUserInfo(data.loginname, data.avatar_url, data.id, this.strToken)
window.history.back();
}else{
// 失利
}
})
}
},
components : {
'nv-header' : nvHeader
},
store : store,
vuex : {
actions : {
userLogin : isLogin,
setUserInfo : setUserInfo
}
}
}我们在login.vue这个组件中挪用了子组件header.vue这个组件，在header.vue组件中又挪用了menu.vue这个组件，而在menu这个组件中有一块用户信息是我们登录了才会去显现当前登录用户的基本信息，这就要从store中去猎取状况啦，而我们之前登录胜利应景对store的状况举行了更新，menu.vue中应当自动相应,把用户信息展现出来
<template>
<div class="meun" :class="{'showMeun':showm}">
<div class="user_info" v-if="userLoginState">
<div class="avatar">
<img :src="user_avatar" alt="">
</div>
<div class="name">
<p v-text="user_name"></p>
</div>
</div>
<ul>
<li v-link="{name:'home'}">首页</li>
<li v-link="{name : 'search'}">搜刮</li>
<li v-link="{name : 'login'}" v-if="!userLoginState">登录</li>
<li v-if="userLoginState">未读音讯</li>
<li v-if="userLoginState">设置</li>
<li v-link="{name : 'about'}">关于</li>
</ul>
</div>
</template>
<script>
import store from '../vuex/store';
import {getLoginState, getUserInfo} from '../vuex/getters';
export default {
props : ['showm'],
data : function() {
return {
user_name : this.getUserInfo.loginname || '',
user_avatar : this.getUserInfo.avatar || ''
}
},
vuex : {
getters : {
userLoginState : getLoginState,
getUserInfo : getUserInfo
}
}
}
</script>
结束语：
ok，这个登录显现用户信息的基本功用就完成了。固然另有很多的处所能够用到vuex，比如说在本项目标弹窗组件也用到了vuex，来依据详细情境显现对应的提醒文本。本人重构的Cnode项目也在逐步的完美，假如以为本篇文章对你有收成能够star支撑一下，感谢！
github源码
线上demo接见地点
tip：线上demo在浏览器切换为挪动端形式下接见结果更佳
