Vuex簡單入門

2021-08-20 02:25:29 字數 1328 閱讀 6812

1.vuex是什麼?

學院派:vuex是乙個專為vue.js應用程式開發的狀態管理模式;集中儲存和管理應用的所有元件狀態。

理解:以上這4個詞是我們理解的關鍵。狀態:什麼是狀態,我們可以通俗的理解為資料。vue只關心檢視層,那麼檢視的狀態如何來確定?我們知道是通過資料驅動,這裡的狀態管理可以簡單理解為管理資料。集中儲存:vue只關心檢視,那麼我們需要乙個倉庫(store)來儲存資料,而且是所有的資料集中儲存,檢視和資料就可以分析。管理:除了儲存,還可以管理資料,也就是計算、處理資料。所有元件狀態:所用的元件共用乙個倉庫(store),也就是乙個專案只有乙個資料來源(區分模組modules)。

總結:vuex就是在乙個專案中,提供唯一的管理資料來源的倉庫。

2.有什麼用?使用場景?

場景一:處理多元件依賴於同乙個資料,例如有柱狀圖和條形圖兩個元件都是展示的同一資料;

場景二: 乙個元件的行為——改變資料——影響另乙個元件的檢視,其實也就是公用依賴的資料;

vuex將元件公用資料抽離,在乙個公共倉庫管理,使得各個元件容易獲取(getter)資料,也容易設定資料(setter)。

3.原始碼初覽

這是vuex的原始碼檔案,總共包含五大部分,plugins兩個注入檔案,核心檔案index,幫組文件helper,工具檔案util.js

我們先看看index.js檔案export的框架,後面具體分析。

?

1

2

3

4

5

6

7

8

exportdefault

後面文章分析store倉庫。

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援指令碼之家。

Vuex簡單入門

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

Vuex 快速入門 簡單易懂

一 vuex介紹 1 vuex是什麼?1.借鑑 了flux redux the elm architecture 2.專為 vue.js 設計 的狀態管理模式 3.集中式儲存和管理應用程式中所有元件的狀態 4.vuex 也整合到 vue 的官方除錯工具 5.乙個 vuex 應用的核心是 store ...

Vuex簡單入門5 actions

action 可以包含任意非同步操作。1.在store.js建立actions 可以在中間呼叫 mutation中的方法 將actions加入store constactions reduceaction export default newvuex.store 2.count.vue中 impor...