簡簡單單的Vue3（外掛程式開發，路由系統，狀態管理）

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

系列：零基礎搭建前後端分離專案

那在上篇文章，我們講了，vue的生命週期，vue的元件,那這篇文章我們講下更高階的：外掛程式，路由，狀態管理。

外掛程式外掛程式通常會為 vue 新增全域性功能。外掛程式的範圍沒有限制——一般有下面幾種：

使用外掛程式

使用全域性方法vue.use(myplus)，就可以使用了，但在此事前要引用外掛程式的js，直接引用或者npm i myplus進行安裝，然後import myplus from myplus。

開發外掛程式

vue.js 的外掛程式應該有乙個公開方法 install。這個方法的第乙個引數是 vue 構造器，第二個引數是乙個可選的選項物件：簡單來講，就是自己擴充套件vue。

var myplugins= ;
console.log(`$_$`);
// 2. 新增全域性資源
vue.directive("hello", ,
// 被繫結元素插入父節點時呼叫
inserted: function (el) ,
// 所在元件的`vnode`更新時呼叫，但是可能發生在其子元素的`vnode`更新之前
update: function (el) ,
// 所在元件的`vnode`及其子元素的`vnode`全部更新時呼叫
componentupdated: function (el) ,
// 只呼叫一次，指令與元素解綁時呼叫
unbind: function (el) 
});//// 3. 注入元件
vue.mixin(,
uninstall() ,
install() 
}});
vue.prototype.$message = "我是乙隻小小鳥....";
vue.prototype.showmessage = value => ;
}};

例子：零基礎搭建前後端分離專案/code/vue/sample/10外掛程式.html

路由(vue-router)

vue-router也是乙個外掛程式。

vue router 是 vue.js 官方的路由管理器。它和 vue.js 的核心深度整合，讓構建單頁面應用變得易如反掌。包含的功能有：

安裝，跟上面的一樣，可以直接引用，可以使用npm來安裝使用。

例子：零基礎搭建前後端分離專案/code/vue/sample/12路由系統.html

定義路由

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

//  定義路由
const routes = [
,]//建立 router 例項，然後傳 `routes` 配置
const router = new vuerouter()
// 建立和掛載根例項。
// 記得要通過 router 配置引數注入路由，
// 從而讓整個應用都有路由功能
router

跳轉

go to foo

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

跳轉+引數

go to bar

這樣的語句就可以跳轉/bar了，並且傳遞攜帶的引數。然後會根據配置好的路由，跳轉相對用位址。在路由出口顯示你的/bar所關聯的元件形成的內容。如果需要內部呼叫的話，可以使用router.push(})

注意：如果提供了 path，params 會被忽略，也就是params不會傳遞過去的

那麼怎麼獲取傳遞過去的引數呢?

vm.$route.query.message;
vm.$route.params.message;

像這樣就可以獲取到路由的資料了，vm代表的是vue例項本身。

狀態管理模式(vuex)

vuex也是乙個外掛程式。

vuex是乙個專門為vue.js應用程式開發的狀態管理模式,它採用集中式儲存管理所有元件的公共狀態, 並以相應的規則保證狀態以一種可**的方式發生變化.

vuex簡單來講，就是乙個或多個元件可以共享乙個物件。物件更新，相對應的元件也更新，這樣就可以解決同級元件的互動問題。

安裝：同樣道理，跟上面一樣，可以直接引用，也可npm安裝。

例子：零基礎搭建前後端分離專案/code/vue/sample/13狀態管理模式vuex.html

const store = new vuex.store(,,,
]},
getters: 
})return saleproducts;}},
mutations: )}},
actions: , 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，不同在於：

在這篇文章，我們更深入去了解vue，通過vue官方自帶的外掛程式，學習了更多，外掛程式我們可以根據需求自己開發，官方提供的路由，狀態管理等外掛程式，在開發也起到非常大的重用，

在接下來的最後一篇文章，我們會講述vue-cli3.0來建立vue專案與vue專案的除錯。

在最後感謝：

簡簡單單的Vue3（外掛程式開發，路由系統，狀態管理）

索引簡簡單單的了解

簡簡單單的MySQL索引基礎

好好的活，簡簡單單過！

簡簡單單的Vue3（外掛程式開發，路由系統，狀態管理）

索引簡簡單單的了解

簡簡單單的MySQL索引基礎

好好的活，簡簡單單過！

相關推薦