摘要：首先我們從登錄頁面以及開始，因?yàn)楹罄m(xù)很多其它的頁面都需要登錄信息。大家還是看看我這做個(gè)指引，具體還是看代碼原文地址其他使用快速開發(fā)單頁應(yīng)用主體結(jié)構(gòu)使用快速開發(fā)單頁應(yīng)用使用快速開發(fā)單頁應(yīng)用登錄頁面使用快速開發(fā)單頁應(yīng)用功能組件與路由組件通信

本文所涉及代碼全在vue-cnode

前面兩篇都是介紹組織結(jié)構(gòu)和vue-router，從本文開始我們將講一些如何優(yōu)雅的用vue編寫單頁應(yīng)用。首先我們從登錄頁面以及開始，因?yàn)楹罄m(xù)很多其它的頁面都需要登錄信息。

首先我們第一步肯定是指定一條路由啦，在src/config_router.js里面增加一條路由

export function configRouter (router) {
  router.map({
    "/login": {
      name: "login",
      title: "登錄",
      // es6箭頭函數(shù)
      component: (resolve) => require(["./components/login/login.vue"], resolve)
    }
  })

}

上面compenents部分，使用了webpack代碼分割功能，這樣他會(huì)安需加在./components/login/login.vue組件。也可以這樣寫component: require("./components/login/login.vue")，這樣就不會(huì)按需載入了。編譯的第一個(gè)文件就有這個(gè)。

然后我們需要在src/conponengts/下面創(chuàng)建一個(gè)login的文件夾一個(gè)login.vue的文件。最開始login.vue里面應(yīng)該是這樣的：

上面是vue-loader的結(jié)構(gòu)，你可以看到，樣式、模版、js三者很清晰，不像react中的寫法全是js，jsx感覺還有點(diǎn)混亂（個(gè)人觀點(diǎn)）。

上面的style中lang是指定解析語言，我們這里用的是stylus，然后src指定文件路徑，最后的一個(gè)scoped是指定樣式只在當(dāng)前組件生效。template和script里面的內(nèi)容就部多介紹了，現(xiàn)在開始編寫業(yè)務(wù)邏輯。

這里我們不介紹vuex是個(gè)啥，文檔在這里。

我們需要保存登錄的信息，因?yàn)樵诤罄m(xù)的所有接口中去獲取數(shù)據(jù)我們都需要服務(wù)器返回的用戶信息。這里我們將獲取用戶信息、保存用戶信息邏輯全部拆出來交給vuex。

先安裝vuex：npm install vuex --save，然后我們建一個(gè)store。在src文件夾下面創(chuàng)建`/vuex/modules/user_info.js：

// content
import {
  SET_BASEINFO,
  SET_DETAIL
} from "../mutation_types"
const state = {
  // 保存第一頁數(shù)據(jù)
  id: "",
  accessToken: "",
  loginName: "",
  avatarUrl: "",
  score: "",
  recentTopics: "",
  recentReplies: "",
  github: "",
  createAt: ""
}

const mutations = {
  // 設(shè)置 token 登錄名 頭像
  [SET_BASEINFO] (state, data) {
    try {
      state.id = data.id
      state.accessToken = data.accesstoken
      state.loginName = data.loginname
      state.avatarUrl = data.avatar_url
    } catch (err) {
      console.log(err)
    }
  },
  [SET_DETAIL] (state, data) {
    try {
      state.score = data.score
      state.recentTopics = data.recent_topics
      state.recentReplies = data.recent_replies
      state.github = data.githubUsername || ""
      state.createAt = data.create_at
    } catch (err) {
      console.log(err)
    }
  }
}

export default {
  state,
  mutations
}

上面有個(gè)mutation_types是用來讓mutation唯一的，在mutation_types里面是這樣的：

// user info
export const SET_BASEINFO = "SET_BASEINFO"
export const SET_DETAIL = "SET_DETAIL"

用const來保證唯一性。

然后我們需要將modules加到store里面，新建一個(gè)/src/vuex/store.js文件：

import Vue from "vue"
import Vuex from "vuex"
import userInfo from "./modules/user_info"
Vue.use(Vuex)

const debug = process.env.NODE_ENV !== "production"
export default new Vuex.Store({
  modules: {
    userInfo
  },
  strict: debug,
  middlewares: debug ? [] : []
})

再把其在App.vue里面引用，App.vue加入：

import store from "./vuex/store"
export default {
  store
}

這樣我們就可以用:

vuex: {
  getters: {
    accessToken: ({ userInfo }) => userInfo.accessToken
  }
}

來獲取用戶數(shù)據(jù)了。

我們將獲取用戶信息，保存用戶信息的邏輯全放在vuex的actions里面，而不是在業(yè)務(wù)邏輯里面獲取，只是在vuex里面保存一下。這樣業(yè)務(wù)邏輯就更扁平了，數(shù)據(jù)的獲取只需要調(diào)用一下actions里面的函數(shù)，用getter來動(dòng)態(tài)獲取。具體代碼如下：

// /src/vuex/actions/user_actions.js
import * as types from "../mutation_types"
import { setMsg } from "../../tool"
import Vue from "vue"
let localStorage = window.localStorage
let storeBaseInfo = (data) => {
  localStorage.setItem("cnodeBaseInfo", JSON.stringify(data))
}
let storeDetailInfo = (data) => {
  localStorage.setItem("cnodeDetailInfo", JSON.stringify(data))
}
// 獲取存儲(chǔ)在localStorage中的數(shù)據(jù)
export const getStore = ({ dispatch, state }) => {
  if (localStorage.getItem("cnodeBaseInfo")) {
    let data = JSON.parse(localStorage.getItem("cnodeBaseInfo"))
    dispatch(types.SET_BASEINFO, data)
  }
  if (localStorage.getItem("cnodeDetailInfo")) {
    let data = JSON.parse(localStorage.getItem("cnodeDetailInfo"))
    dispatch(types.SET_DETAIL, data)
  }
}
// 設(shè)置基礎(chǔ)數(shù)據(jù)
export const setBaseInfo = ({ dispatch, state }, token, callback) => {
  Vue.http({
    url: "/api/v1/accesstoken",
    method: "POST",
    body: JSON.stringify({
      accesstoken: token
    }),
    headers: {
      contentType: "application/x-www-form-urlencoded"
    }
  }).then(function (res) {
    let data = JSON.parse(res.data)
    if (data.success) {
      data.accesstoken = token
      delete data.success
      storeBaseInfo(data)
      dispatch(types.SET_BASEINFO, data)
      callback(setMsg(true, "登錄成功"))
    } else {
      console.log(data.error_msg)
      callback(setMsg(false, data.error_msg))
    }
  }).catch(err => {
    console.log(err)
    let errBody = JSON.parse(err.body)
    callback(setMsg(false, errBody.error_msg))
  })
}

上面有個(gè)setMsg的函數(shù)，只是用來將格式化返回給組件的內(nèi)容的，把a(bǔ)ction寫的就像一個(gè)接口一樣。

上面用了vue-resource。然后我們做的事主要就件，調(diào)用接口，拿數(shù)據(jù)，錯(cuò)誤處理，保存數(shù)據(jù)到localStorage，返回?cái)?shù)據(jù)。

接下來，我們看看組件里面的獲取數(shù)據(jù)：

import dialog from "../common/dialog"
  import { setBaseInfo, setDetail } from "../../vuex/actions/user_actions"
  import { setMenu, setTip } from "../../vuex/actions/doc_actions"
  export default {
    vuex: {
      actions: {
        setBaseInfo,
        setMenu,
        setTip,
        setDetail
      }
    },
    data () {
      return {
        config: {
          visible: false,
          text: "在 Cnode社區(qū)網(wǎng)站端登錄你的賬戶，然后在右上角找到【設(shè)置】按鈕，點(diǎn)擊進(jìn)入后將頁面滑動(dòng)到最底部來查看你的Access Token。",
          sureText: "確定"
        },
        access: ""
      }
    },
    methods: {
      dialog () {
        this.config.visible = true
      },
      success () {
        window.history.go(-1)
        this.setMenu(true)
        this.setDetail()
      },
      login () {
        if (this.access.length < 6) {
          this.setTip({
            text: "請(qǐng)輸入正確的Access Token"
          })
          return
        }
        this.setBaseInfo(this.access, (res) => {
          if (res.success) {
            this.success()
          }
          this.setTip({
            text: res.msg
          })
        })
      }
    },
    components: {
      dialog
    }
  }

首先引入actions,然后調(diào)用，因?yàn)榉祷財(cái)?shù)據(jù)格式事固定的，直接做判斷，錯(cuò)誤就用dialog彈錯(cuò)錯(cuò)誤。是不是很清爽。

我感覺要仔仔細(xì)細(xì)把所有全部講完，篇幅太長了。。。大家還是看看我這做個(gè)指引，具體還是看代碼

原文地址：http://hiluluke.cn/2016/08/20...

其他

使用Vue快速開發(fā)單頁應(yīng)用－主體結(jié)構(gòu)

使用Vue快速開發(fā)單頁應(yīng)用－vue-router

使用Vue快速開發(fā)單頁應(yīng)用－登錄頁面

使用Vue快速開發(fā)單頁應(yīng)用－功能組件與路由組件通信