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

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

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

關于vuex的基本用法請參見中文API

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

建立一個文件 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
})

建立一個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);
}

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

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

這里注意一點在子父組件中調用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中應該自動響應,把用戶信息展示出來

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

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