既然選擇了遠方，便只顧風雨兼程 __ HANS許
系列：零基礎搭建前後端分離專案
那在上篇文章，我們講了，Vue的生命週期，Vue的元件,那這篇文章我們講下更進階的：外掛，路由，狀態管理。
外掛
外掛通常會為 Vue 新增全域性功能。外掛的範圍沒有限制——一般有下面幾種：
- 新增全域性方法或者屬性，如: vue-custom-element
- 新增全域性資源：指令/過濾器/過渡等，如 vue-touch
- 通過全域性 mixin 方法新增一些元件選項，如: vue-router
- 新增 Vue 例項方法，通過把它們新增到 Vue.prototype 上實現。
- 一個庫，提供自己的 API，同時提供上面提到的一個或多個功能，如 vue-router
-
使用外掛
使用全域性方法Vue.use(myplus)，就可以使用了，但在此事前要引用外掛的js，直接引用或者npm i myplus進行安裝，然後import myplus from Myplus。 -
開發外掛
Vue.js 的外掛應該有一個公開方法 install。這個方法的第一個引數是 Vue 構造器，第二個引數是一個可選的選項物件：簡單來講，就是自己擴充套件Vue。
var myPlugins= {
install(Vue, options) {
Vue.$data = {
firstName: "大漠",
lastName: "W3cplus"
};
console.log(`${Vue.$data.firstName}_${Vue.$data.lastName}`);
// 2. 新增全域性資源
Vue.directive("hello", {
// 只呼叫一次，指令第一次繫結到元素時呼叫
bind: function () {
console.log("觸發bind鉤子函式！");
},
// 被繫結元素插入父節點時呼叫
inserted: function (el) {
console.log("觸發inserted鉤子函式！");
},
// 所在元件的`VNode`更新時呼叫，但是可能發生在其子元素的`VNode`更新之前
update: function (el) {
console.log("觸發update鉤子函式！");
},
// 所在元件的`VNode`及其子元素的`VNode`全部更新時呼叫
componentUpdated: function (el) {
console.log("觸發componentUpdated鉤子函式！");
},
// 只呼叫一次，指令與元素解綁時呼叫
unbind: function (el) {
console.log("觸發unbind鉤子函式！");
}
});
//// 3. 注入元件
Vue.mixin({
methods: {
update() {
this.message = "Hi! 大漠";
},
uninstall() {
this.message = "";
},
install() {
this.message = "Hello！W3cplus";
}
}
});
Vue.prototype.$message = "我是一隻小小鳥....";
Vue.prototype.showMessage = value => {
console.log(value);
};
}
};
例子：https://xhl592576605.github.io/markdown/零基礎搭建前後端分離專案/Code/Vue/sample/10外掛.html
路由(vue-router)
vue-router也是一個外掛。
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度整合，讓構建單頁面應用變得易如反掌。包含的功能有：
- 巢狀的路由/檢視表
- 模組化的、基於元件的路由配置
- 路由引數、查詢、萬用字元
- 基於 Vue.js 過渡系統的檢視過渡效果
- 細粒度的導航控制
- 帶有自動啟用的 CSS class 的連結
- HTML5 歷史模式或 hash 模式，在 IE9 中自動降級
- 自定義的滾動條行為
安裝，跟上面的一樣，可以直接引用<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>，可以使用npm來安裝使用。
例子：https://xhl592576605.github.io/markdown/零基礎搭建前後端分離專案/Code/Vue/sample/12路由系統.html
-
定義路由
要使用路由，就必須定義一個路由以及一個路由出口，也就是顯示的內容的容器。// 定義路由 const routes = [ { path: `/foo`, component: Foo }, { path: `/bar`, component: Bar } ] //建立 router 例項，然後傳 `routes` 配置 const router = new VueRouter({ routes // (縮寫) 相當於 routes: routes }) // 建立和掛載根例項。 // 記得要通過 router 配置引數注入路由， // 從而讓整個應用都有路由功能 const app = new Vue({ router }).$mount(`#app`)<!-- 路由出口 --> <!-- 路由匹配到的元件將渲染在這裡 --> <router-view></router-view> -
跳轉
<router-link to="/foo">Go to Foo</router-link>這樣的語句就可以跳轉
/foo了，然後會根據配置好的路由，跳轉相對用地址。在路由出口顯示你的/foo所關聯的元件形成的內容。如果需要內部呼叫的話，可以使用router.push(`/foo`) -
跳轉+引數
<router-link :to="{path:`/bar`,params:{message:`params傳值`},query:{message:`query傳值`}}">Go to Bar</router-link>這樣的語句就可以跳轉
/bar了，並且傳遞攜帶的引數。然後會根據配置好的路由，跳轉相對用地址。在路由出口顯示你的/bar所關聯的元件形成的內容。如果需要內部呼叫的話，可以使用router.push({ path: `register`, query: { message:`query傳值` }})注意：如果提供了 path，params 會被忽略，也就是params不會傳遞過去的
那麼怎麼獲取傳遞過去的引數呢?
vm.$route.query.message; vm.$route.params.message;像這樣就可以獲取到路由的資料了，vm代表的是Vue例項本身。
狀態管理模式(Vuex)
vuex也是一個外掛。
Vuex是一個專門為Vue.js應用程式開發的狀態管理模式,它採用集中式儲存管理所有元件的公共狀態, 並以相應的規則保證狀態以一種可預測的方式發生變化.
Vuex簡單來講，就是一個或多個元件可以共享一個物件。物件更新，相對應的元件也更新，這樣就可以解決同級元件的互動問題。
安裝：同樣道理，跟上面一樣，可以直接引用<script src="https://unpkg.com/vuex"></script>，也可npm安裝。
例子：https://xhl592576605.github.io/markdown/零基礎搭建前後端分離專案/Code/Vue/sample/13狀態管理模式Vuex.html
const store = new Vuex.Store({
state: {
/**作為共享狀態新增*/
products: [
{ name: `滑鼠`, price: 20 },
{ name: `鍵盤`, price: 40 },
{ name: `耳機`, price: 60 },
{ name: `螢幕`, price: 80 }
]
},
getters: {
saleProducts: (state) => {
let saleProducts = state.products.map(product => {
return {
name: product.name,
price: product.price / 2
}
})
return saleProducts;
}
},
mutations: { //新增mutations，方法只有同步，不能非同步
minusPrice(state, payload) {
let newPrice = state.products.forEach(product => {
product.price -= payload
})
}
},
actions: { //新增actions context為store物件
minusPriceAsync(context, payload) {
setTimeout(() => {
context.commit(`minusPrice`, payload); //context提交
}, 2000)
}
}
})
上面就定義了一個store(倉庫)，倉庫有state，getters，mutations，actions,我們一個個講過去。
-
state
state就是Vuex中的公共的狀態, 我是將state看作是所有元件的data, 用於儲存所有元件的公共資料.也就是說，他是公有的，是所有元件可以共享的。 -
getters
getters屬性理解為所有元件的computed屬性, 也就是計算屬性. vuex的官方文件也是說到可以將getter理解為store的計算屬性, getters的返回值會根據它的依賴被快取起來，且只有當它的依賴值發生了改變才會被重新計算。 -
mutations
mutaions理解為store中的methods, mutations物件中儲存著更改資料的回撥函式,該函式名官方規定叫type, 第一個引數是state, 第二引數是payload, 也就是自定義的引數。 -
actions
actions 類似於 mutations，不同在於：
- actions提交的是mutations而不是直接變更狀態
- actions中可以包含非同步操作, mutations中絕對不允許出現非同步
- actions中的回撥函式的第一個引數是context, 是一個與store例項具有相同屬性和方法的物件
- 我們可以使用
setTimeout來模擬非同步操作，或者Promise來進行非同步。
在這篇文章，我們更深入去了解Vue，通過Vue官方自帶的外掛，學習了更多，外掛我們可以根據需求自己開發，官方提供的路由，狀態管理等外掛，在開發也起到非常大的重用，
在接下來的最後一篇文章，我們會講述vue-cli3.0來建立vue專案與Vue專案的除錯。