33、vuex初探（一）

摘要： 前言：前面已經為了這章做了一點鋪墊了，關於vuex也有很多讀者私信我關於這方面的問題，其實vuex也很簡單，今天我們就來探探vuex。 GitHub： https://github.com/Ewall1106/mall （選擇chapter33分支） 1、vuex基本概念 ...

前言：前面已經為了這章做了一點鋪墊了，關於vuex也有很多讀者私信我關於這方面的問題，其實vuex也很簡單，今天我們就來探探vuex。

GitHub： ofollow,noindex">https://github.com/Ewall1106/mall （選擇chapter33分支）

1、vuex基本概念

• Vuex 是什麼？ Vuex 是一個專為 Vue.js 應用程式開發的 狀態管理模式 。它採用集中式儲存管理應用的所有元件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。

• 關於vuex的基本概念解釋基本就是一張圖的事情：

大家好好看看官網的解釋。

2、初探實踐

看完以後應該是有點懵逼的，所以這就是這篇文章存在的意義了：就是讓你不那麼懵逼；總歸理論與實踐相結合才能真正弄明白一個東西，所以我們簡單實踐一下。

（1）安裝

（2）然後就是新建一個 store 檔案專門用於我們vuex的狀態管理；

• 在 store 資料夾下新建一個一個 index.js
• 引入 vue 、 vuex 並註冊
• 匯出 vuex
• 定義了一個 state物件 ，這個物件包含了全部應用層級狀態（全域性共用的資料）

（3）然後我們還需要在 main.js 中註冊這個 vuex 倉庫

這樣，我們安裝及引用的一個vuex初始化就完成了。

（4）接下來我們去 test.vue 中就可以嘗試獲取到我們開始在 state 物件中定義的 city 值

3、小結

這就是我們vuex的初探的第一次內容，主要就是安裝及引入，然後在頁面中獲取了state物件中的city值。