Vuex 快速入門 簡單易懂

2021-09-11 13:14:15 字數 1880 閱讀 1368

一、vuex介紹

(1)vuex是什麼?

1. 借鑑 了flux、redux、 the elm architecture

2. 專為 vue.js 設計 的狀態管理模式

3. 集中式儲存和管理應用程式中所有元件的狀態

4. vuex 也整合到 vue 的官方除錯工具

5. 乙個 vuex 應用的核心是 store(倉庫,乙個容器),store包含著你的應用中大部分的狀態 (state)。

(2)什麼情況下我應該使用 vuex?

1. 不適用:小型簡單應用,用 vuex 是繁瑣冗餘的,更適合使用簡單的 store 模式。

2. 適用於:中大型單頁應用,你可能會考慮如何把元件的共享狀態抽取出來,以乙個全域性單例模式管理,不管在哪個元件,都能獲取狀態/觸發行為,解決問題如下:

① 多個檢視使用於同一狀態:

傳參的方法對於多層巢狀的元件將會非常繁瑣,並且對於兄弟元件間的狀態傳遞無能為力

② 不同檢視需要變更同一狀態:

採用父子元件直接引用或者通過事件來變更和同步狀態的多份拷貝,通常會導致無法維護的**

(3)vuex 和單純的全域性物件有何不同?

1.vuex 的狀態儲存是響應式的

當 vue 元件從 store 中讀取狀態的時候,若 store 中的狀態發生變化,那麼相應的元件也會相應地得到高效更新。

2.你不能直接改變 store 中的狀態

改變 store 中的狀態的唯一途徑就是顯式地提交 (commit) mutation,方便我們跟蹤每乙個狀態的變化。

二、vuex安裝

* vue cli 3 中搭建腳手架預設時選擇了「vuex」後便安裝了vuex,可跳過此步閱讀

(1)引入

在 vue 之後引入 vuex 會進行自動安裝:

(2) 包管理

在乙個模組化的打包系統中,您必須顯式地通過 vue.use() 來安裝 vuex:

(3)git clone 自己構建

(4)相容

vuex 依賴 promise。如果你支援的瀏覽器並沒有實現 promise (如 ie),那麼你可以使用乙個 polyfill 的庫(如 es6-promis)

1.你可以通過 cdn 將其引入,window.promise 會自動可用:

2.包管理器安裝:

然後,將下列**新增到你使用 vuex 之前的乙個地方:

三、使用

(1)使用介紹

1.搭建store例項

①. 在建立vuex例項的地方引入vue、vuex,使用vuex:

②. 如果你的actions中用到 store.dispath() ,要引入store

③. new 乙個 vuex.store 例項,並註冊 state、mutations、actions、getters到 vuex.store 例項中

ps. 你可以像上面那樣將「屬性和值」直接寫在例項中,當**量大時,你也可以分別寫個.js檔案,如下圖:

然後引入到 store/index.js 註冊到vuex例項中,如:

2.建立好 vuex.store 後,你需要在入口檔案 main.js 中引入 store 並註冊到 vue 例項中,這樣就可以在任何元件使用store了:

3.在元件中使用:

①. 引入vuex中各屬性對應的輔助函式:

②. 使用store中的狀態資料、方法:

(2)具體demo

來個簡單易懂的計數

eg:store.js

使用時,eg:

main.js:

views/home.vue:

執行結果:

原文:

Vuex簡單入門

1.vuex是什麼?學院派 vuex是乙個專為vue.js應用程式開發的狀態管理模式 集中儲存和管理應用的所有元件狀態。理解 以上這4個詞是我們理解的關鍵。狀態 什麼是狀態,我們可以通俗的理解為資料。vue只關心檢視層,那麼檢視的狀態如何來確定?我們知道是通過資料驅動,這裡的狀態管理可以簡單理解為管...

Vuex簡單入門

vuex的核心是store倉庫 vue的狀態是響應式的,狀態變更同時更新元件 只能通過store.commit.mutation來提交mutation實現更改狀態 通過store.state.state來獲取狀態 在js中註冊store選項,在計算屬性中通過 computed 寫法如下 const ...

廣搜入門(簡單易懂

這裡需要用到 佇列!題目 農夫要抓牛,農夫可以向前走一步,向後走一步,向前走x步 x為農夫座標 求最短走幾次可以走到牛的座標。模板 1 為了方便,定義乙個結構體,代表當前x 座標 steps 走了多少步 2 建立乙個結構體佇列a,queuea 2 將起點,即農夫座標加入佇列,此時佇列只有乙個元素,編...