既然選擇了遠方，便只顧風雨兼程 __ HANS許

系列：零基礎搭建前後端分離項目

• • • • • 系列：零基礎搭建前後端分離項目
        • 插件
        • 路由(vue-router)
        • 狀態管理模式(Vuex)

那在上篇文章，我們講了，Vue的生命周期，Vue的組件,那這篇文章我們講下更進階的：插件，路由，狀態管理。

插件

插件通常會為 Vue 添加全局功能。插件的範圍沒有限制——一般有下面幾種：

• 添加全局方法或者屬性，如: vue-custom-element
• 添加全局資源：指令/過濾器/過渡等，如 vue-touch
• 通過全局 mixin 方法添加一些組件選項，如: vue-router
• 添加 Vue 實例方法，通過把它們添加到 Vue.prototype 上實現。
• 一個庫，提供自己的 API，同時提供上面提到的一個或多個功能，如 vue-router

1. 使用插件
   使用全局方法Vue.use(myplus)，就可以使用了，但在此事前要引用插件的js，直接引用或者npm i myplus進行安裝，然後import myplus from Myplus。

2. 開發插件

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

0. 定義路由
   要使用路由，就必須定義一個路由以及一個路由出口，也就是顯示的內容的容器。

   //  定義路由
   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>
   

1. 跳轉

    <router-link to="/foo">Go to Foo</router-link>
   

   這樣的語句就可以跳轉/foo了，然後會根據配置好的路由，跳轉相對用地址。在路由出口顯示你的/foo所關聯的組件形成的內容。如果需要內部調用的話，可以使用router.push(‘/foo‘)

2. 跳轉+參數

     <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,我們一個個講過去。

1. state
   state就是Vuex中的公共的狀態, 我是將state看作是所有組件的data, 用於保存所有組件的公共數據.也就是說，他是公有的，是所有組件可以共享的。

2. getters
   getters屬性理解為所有組件的computed屬性, 也就是計算屬性. vuex的官方文檔也是說到可以將getter理解為store的計算屬性, getters的返回值會根據它的依賴被緩存起來，且只有當它的依賴值發生了改變才會被重新計算。

3. mutations
   mutaions理解為store中的methods, mutations對象中保存著更改數據的回調函數,該函數名官方規定叫type, 第一個參數是state, 第二參數是payload, 也就是自定義的參數。

4. actions
   actions 類似於 mutations，不同在於：

• actions提交的是mutations而不是直接變更狀態
• actions中可以包含異步操作, mutations中絕對不允許出現異步
• actions中的回調函數的第一個參數是context, 是一個與store實例具有相同屬性和方法的對象
• 我們可以使用setTimeout來模擬異步操作，或者Promise來進行異步。

在這篇文章，我們更深入去了解Vue，通過Vue官方自帶的插件，學習了更多，插件我們可以根據需求自己開發，官方提供的路由，狀態管理等插件，在開發也起到非常大的重用，
在接下來的最後一篇文章，我們會講述vue-cli3.0來創建vue項目與Vue項目的調試。

在最後感謝：https://www.jianshu.com/p/a804606ad8e9

簡簡單單的Vue3（插件開發，路由系統，狀態管理）