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

既然選擇了遠方，便只顧風雨兼程 __ 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