摘要：開發(fā)時(shí)官方推薦使用，在配置這個(gè)項(xiàng)目時(shí)，由于考慮登錄態(tài)的維護(hù)，所以對(duì)路由配置加了數(shù)據(jù)，并增加了路由跳轉(zhuǎn)鉤子函數(shù)，進(jìn)行鑒權(quán)控制受登錄態(tài)的頁面。

這個(gè)項(xiàng)目主要是用vue+vuex實(shí)現(xiàn)一個(gè)單頁面應(yīng)用，純粹是熟悉vue全家桶相關(guān)開發(fā)模式，用于練手非常合適。

著手開發(fā)完了之后可以學(xué)的東西：

熟悉vue單文件組件開發(fā)方式

熟悉如何寫一個(gè)vue插件

熟悉如何使用vue-router以及掛載路由鉤子函數(shù)

熟悉vuex是如何運(yùn)作的，模塊化維護(hù)應(yīng)用狀態(tài)數(shù)據(jù)

體驗(yàn)typescript的開發(fā)方式

如果想學(xué)vue的不妨進(jìn)來看看。

vue

vuex

vue-router

typescript

開始之前，還是有必要去vue官網(wǎng)學(xué)習(xí)一下vue，至少得有個(gè)大致的了解，后面在用到vue-router和vuex時(shí)，再去對(duì)應(yīng)的倉庫看文檔就可以了。

vue官網(wǎng)地址

vue-router地址

vuex地址

創(chuàng)建項(xiàng)目可以用vue-cli，具體看這里

項(xiàng)目結(jié)構(gòu)一般來說非常重要，定義好的目錄結(jié)構(gòu)，非常利于后續(xù)的項(xiàng)目維護(hù)，以及別人閱讀理解。下面就是這個(gè)項(xiàng)目的結(jié)構(gòu)，應(yīng)該看一下就知道是干什么的，大致說一下。

項(xiàng)目結(jié)構(gòu)分為靜態(tài)資源目錄，api接口請(qǐng)求目錄，組件目錄，插件目錄，路由配置目錄，公共樣式目錄，狀態(tài)維護(hù)目錄，工具類目錄，頁面視圖目錄。

vue開發(fā)一般都是單頁面組件的方式，即一個(gè)以vue為后綴的文件就是一個(gè)組件，組件里包含了template模版，script腳本，style樣式，組件內(nèi)的邏輯可以完全封裝在里面，對(duì)外可以提供接受的Props數(shù)據(jù)，可以對(duì)外發(fā)射一個(gè)事件emit，或者將外部組件組合到自己內(nèi)部的slot里面。

由于在客戶端渲染的單頁面應(yīng)用，需要在客戶端配置路由，實(shí)現(xiàn)頁面間的切換。開發(fā)vue時(shí)官方推薦使用vue-router，在配置這個(gè)項(xiàng)目時(shí)，由于考慮登錄態(tài)的維護(hù)，所以對(duì)路由配置加了meta數(shù)據(jù)，并增加了路由跳轉(zhuǎn)鉤子函數(shù)，進(jìn)行鑒權(quán)控制受登錄態(tài)的頁面。

import Vue from "vue";
import Router from "vue-router";
import Sign from "@/views/Sign.vue";
import Me from "@/views/Me.vue";
import { hasLogin } from "@/util/session";

Vue.use(Router);

const router = new Router({
  mode: "history",
  routes: [
    {
      path: "/",
      name: "sign",
      component: Sign,
    },
    {
      path: "/me",
      name: "me",
      component: Me,
      meta: { requiredAuth: true },
    },
  ],
});

router.beforeEach((to, from, next) => {
  if (to.matched.some((record) => record.meta.requiredAuth)) {
    // this route requires auth, check if logged in
    // if not, redirect to login page.
    if (!hasLogin()) {
      next({
        path: "/",
        query: { redirect: to.fullPath },
      });
    } else {
      next();
    }
  } else {
    next(); // 確保一定要調(diào)用 next()
  }
});

export default router;

對(duì)于那種需要全組件共享，或者全局注入的方法等可以使用vue插件。其實(shí)，vue-router和vuex實(shí)際就是vue的插件，在入口處，調(diào)Vue.use(Router); 就可以了，比如 Vue.use(Router);

一個(gè)插件，可以是一個(gè)函數(shù)，或者一個(gè)包含install方法的對(duì)象，在調(diào)用Vue.use時(shí)，會(huì)調(diào)用install方法。

在插件里，我們可以

添加全局方法或者屬性，

添加全局資源

通過全局 mixin 方法添加一些組件選項(xiàng)

添加 Vue 實(shí)例方法

import Vue, { VueConstructor, PluginObject } from "vue";
import Loading from "./Loading.vue";

type ShowFunc = () => () => void;

const plugin: PluginObject<{}> = {
  install(Vue: VueConstructor, options = {}) {
    const CONSTRUCTOR = Vue.extend(Loading);
    let cache: Vue & { show: ShowFunc } | null = null;

    function loading(): () => void {
      const loadingComponent = cache || (cache = new CONSTRUCTOR());
      if (!loadingComponent.$el) {
        const vm = loadingComponent.$mount();
        (document.querySelector("body") as HTMLElement).appendChild(vm.$el);
      }
      return loadingComponent.show();
    }
    Vue.prototype.$loading = loading;
  },
};

export default plugin;

單頁面應(yīng)用的狀態(tài)管理使用vuex，上面提到了，它就是一個(gè)vue的插件，會(huì)在組件實(shí)例上注入$store對(duì)象，這個(gè)對(duì)象就是new Vuex.Store(),相比redux ，我覺得vuex簡(jiǎn)單很多。使用需要注意一下幾點(diǎn)就可以了，

改變state，始終是通過commit一個(gè)mutation方式進(jìn)行，mutation函數(shù)里必須是同步改變state，不能異步改變state。對(duì)應(yīng)redux中，就是reducer函數(shù)的功能了。

對(duì)于異步改變state，可以通過dispatch一個(gè)action，action里面異步獲取數(shù)據(jù)之后在commit一個(gè)對(duì)應(yīng)的mutation。這個(gè)在redux里，是通過中間件處理異步action的。

對(duì)于state的過濾篩選，可以定義getter，getter是緩存依賴的。

對(duì)于大型復(fù)雜的state，可以采用模塊化的方式管理各個(gè)模塊的state，這個(gè)跟redux的思想是一樣的。

本次項(xiàng)目也是用模塊化的管理狀態(tài)的方式，把整個(gè)應(yīng)用的狀態(tài)以業(yè)務(wù)劃分為子狀態(tài)，最后在modules中合并

  modules: {
    user,
    list,
    filter,
  },

對(duì)于單個(gè)模塊的state，按照上面的注意點(diǎn)即可以。

// user模塊的state
import { ActionTree, MutationTree, ActionContext } from "vuex";
import { login, loginOut, LoginInfo } from "@/api/login";
import { getUserInfo, getUserActions } from "@/api/user";
import { User } from "./user";
import { RootState } from "../../rootstate";

const namespaced = true;

/* initial state */
const state = () => ({
  id: null,
  username: null,
  email: null,
  avatar: null,
  likes_count: null,
  goings_count: null,
  past_count: null,
});

/* user actions */
const actions: ActionTree = {
  login({ commit, state }: ActionContext, payload: LoginInfo) {
    return login(payload).then(
      ({ token, user }: { token: string; user: User }) => {
        commit("saveToken", token, { root: true });
        commit("saveUser", user);
      },
    );
  },
  getUserInfo({ commit, state }: ActionContext) {
    return getUserInfo().then((user: User) => {
      commit("saveUser", user);
    });
  },
};

/* user mutations */
const mutations: MutationTree = {
  saveUser(state, user) {
    state.id = user.id;
    state.username = user.username;
    state.email = user.email;
    state.avatar = user.avatar;
    state.likes_count = user.likes_count;
    state.goings_count = user.goings_count;
    state.past_count = user.past_count;
  },
};

export default {
  state,
  actions,
  mutations,
  namespaced,
};