摘要：定義需要狀態(tài)的參數(shù)變量，狀態(tài)變更用于改變的狀態(tài)，注意中是不能直接改變中的狀態(tài)的，一定要借助于的事件分發(fā)。而在中進行事件的分發(fā)就可以進行異步操作。當(dāng)然還有許多的地方可以用到，比如說在本項目的彈窗組件也用到了，來根據(jù)具體情境顯示對應(yīng)的提示文本。

在第一版初步實現(xiàn)cnode的基本功能后，本來是用本地存儲的存儲用戶登錄成功返回的用戶的基本信息，用于后面的回復(fù)功能，查看信息等操作需要的用戶基本信息的數(shù)據(jù)。但是總的來說感覺本地儲存的方案不太理想（個人想法），所以想引入vuex來存儲用戶信息，還有一些跨組件的狀態(tài)和數(shù)據(jù)。

簡單的介紹一下我理解的vuex是什么東西，因為我們知道vue的組件子父之間是可以同過props實現(xiàn)數(shù)據(jù)的單向和雙向傳遞，但是我們可能經(jīng)常遇到的業(yè)務(wù)場景是一個組件的狀態(tài)發(fā)生改變需要在另一個與他不相關(guān)的組件進行響應(yīng)，這個時候如果我們沒做全局變量就沒辦法搞了，所以說vuex總的來說就是一個全局的狀態(tài)管理。（我是這么認(rèn)為的）

關(guān)于vuex的基本用法請參見中文API

現(xiàn)在直接上手實現(xiàn)一個功能把登錄成功的用戶信息保存在vuex中，這個功能是基于你看過文檔并初步了解了vuex，知道state，mutation這些基本概念，由于API的文檔中的例子只是個簡單的demo，所以我寫了這個功能更貼切一個項目中實際的場景。（這里就不介紹那些基礎(chǔ)概念了，因為API肯定介紹得比我詳細(xì)）

建立一個文件 store.js代碼如下。state定義需要狀態(tài)的參數(shù)變量，mutation（狀態(tài)變更）用于改變state的狀態(tài)，注意vuex中是不能直接改變state中的狀態(tài)的，一定要借助于mutation的事件分發(fā)。mutation的方法可以第一個參數(shù)一定是state，后面也可以選擇帶參，兩種本例子下面都有定義。

"use strict";
import Vue from "vue"
import Vuex from "vuex";
Vue.use(Vuex);
const state = {
     // 頁面打開默認(rèn)設(shè)置登錄狀態(tài)為否
     isLogin : false,
     // 保存登錄信息
     userInfo : {
          "loginname" : "",
          "avatar" : "",
          "id" : "",
          "accesstoken" : ""
     }
}
const mutations = {
     // 設(shè)置登錄
     ISLOGIN (state) {
          state.isLogin = true;
     },
     // 設(shè)置登錄用戶信息
     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
})

建立一個action.js代碼如下，用于用戶分發(fā)mutation的事件?？赡苡行┤藭苫鬄槭裁匆鄬戇@個文件來分發(fā)mutation的事件，是應(yīng)為我們的mutation必須是同步執(zhí)行，如果在mutation中進行回調(diào)，根本就無法確定到底什么時候能執(zhí)行那個回調(diào)函數(shù)。而在action中進行事件的分發(fā)就可以進行異步操作。

/**
  *修改用戶登錄狀態(tài)為已經(jīng)登錄
**/
export const isLogin = ({dispatch}) => {
     dispatch("ISLOGIN");
}
/**
  *設(shè)置用戶的登錄信息
  *參數(shù) name用戶名 avatar用戶頭像 id用戶id accesstoken用戶登錄標(biāo)識
**/
export const setUserInfo = ({dispatch}, name, avatar, id, accesstoken) => {
     dispatch("SETUSERINFO", name, avatar, id, accesstoken);
}

建立一個getters.js代碼如下，用戶用戶獲取state中的狀態(tài)。

//獲取用戶的登錄狀態(tài)
export const getLoginState = (state) => {
     return state.isLogin;
}
//獲取登錄用戶的信息
export const getUserInfo = (state) => {
     return state.userInfo;
}

這里注意一點在子父組件中調(diào)用vuex區(qū)別的一點是父組件一定要定義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的狀態(tài)為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這個組件中調(diào)用了子組件header.vue這個組件，在header.vue組件中又調(diào)用了menu.vue這個組件，而在menu這個組件中有一塊用戶信息是我們登錄了才會去顯示當(dāng)前登錄用戶的基本信息，這就要從store中去獲取狀態(tài)啦，而我們之前登錄成功應(yīng)景對store的狀態(tài)進行了更新，menu.vue中應(yīng)該自動響應(yīng),把用戶信息展示出來

ok，這個登錄顯示用戶信息的基本功能就實現(xiàn)了。當(dāng)然還有許多的地方可以用到vuex，比如說在本項目的彈窗組件也用到了vuex，來根據(jù)具體情境顯示對應(yīng)的提示文本。本人重構(gòu)的Cnode項目也在逐漸的完善，如果覺得本篇文章對你有收獲可以star支持一下，謝謝！

tip：線上demo在瀏覽器切換為移動端模式下訪問效果更佳