Vuex 是一個專為 Vue.js 應用程式開發的狀態管理模式。它採用集中式儲存管理應用的所有元件的狀態,並以相應的規則保證狀態以一種可預測的方式變更。簡單來說就是:應用程式遇到多個元件共享狀態時,使用vuex。
場景:多個元件共享資料或跨元件傳遞資料時
優勢和劣勢有哪些?
優勢主要就是可以全域共享數據,方法。方便統一管理
劣勢的話,頁面刷新後state的變數都會還原清空,不會像cookies一樣持久性儲存
頁面刷新後vuex的state資料遺失怎麼解決?
先說一下為什麼會遺失呢?
因為store裡的資料是保存在運行記憶體中的,當頁面刷新時頁面會重新載入vue實例,store裡面的資料就會被重新賦值
如何避免?
其實主要還是看使用的場景是怎麼樣的,如果想某些資料持久性保留也可以搭配使用cookies或localStorage。例如一些登入的資訊等。
例如請求拿到了登入資訊後可以先存在localStorage,將state裡的變數值和sessionStorage裡面的綁定,mutations中修改的時候同時修改state和localStorage。最後頁面直接使用vuex中的變數。 【相關推薦:vue.js視訊教學】
vuex的安裝
開啟終端,輸入命令列npm install vuex - -save進行下載vuex
這裡新建store資料夾,建立一個js取名為index.js,
在index裡,透過將state ,mutations,actions,getters引入store中,並揭露store物件。
下面為index.js的程式碼
1 2 3 4 5 6 7 8 9 |
|
掛載store到vue實例上
main.js中
1 2 3 4 5 |
|
我們通常將需要進行管理的共享數據,放入state中,使其形似為全域變量,對於需要的元件進行引入該state狀態數據。
1 2 3 4 5 6 7 8 9 |
|
mutations用於更改state中的狀態邏輯的,並且為同步更改state中的狀態資料。
要知道的是在vuex中只能透過mutation來去修改state對象,
可以透過取得actions取得的資料去修改state,也可以在mutations模組中直接定義方法來去更改狀態資料。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
|
透過mutations和下面的actions模組,大家也可以看出commit是用來呼叫mutation模組中的。
在元件中呼叫其mutation模組的程式碼為:
1 |
|
actions與其mutations類似,但其可以進行非同步操作,
且將非同步操作獲取的資料提交給mutations,使得mutations更改state中的狀態資料, 這裡常常用於獲取ajax請求中的資料(因為是異步),並將其獲取的資料commit提交給mutations 使得state資料狀態的更新。
和mutations 的不同之處在於:
- Action 提交的是 mutation,而不是直接變更狀態。
- Action 可以包含任意非同步操作。
範例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
|
這個actions在元件中的呼叫方法就是:
1 2 3 4 |
|
Getters相當於computed計算屬性,用於加工處理state狀態數據,有其兩個預設參數,第一個預設參數為state,第二個預設參數為getters。
1 2 3 4 5 6 7 |
|
在元件中呼叫方法的程式碼片段為:
1 |
|
從store
實例中讀取狀態最簡單的方法就是在計算屬性中傳回某個狀態,由於Vuex
的狀態儲存是響應式的,所以在這裡每當store.state.count
變化的時候,都會重新求取計算屬性,進行響應式更新。
1 2 3 4 |
|
那么对于以上的store我们就简单介绍完了,相信大家看完后对于vuex会有一定的理解。那么这个时候我们要想,是不是使用this.$store.state
或this.$store.getters.xxx
感到麻烦呢?下面我们介绍另一种引入state和getters的方式
对于上述的在组件中引用state和getters的方法是不是感到麻烦呢?使用mapState你将会感受到便利。
组件中这样使用
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
|
Module子模块化管理
store文件夹下的index.js代码如下
1 2 3 4 5 6 7 |
|
文件目录如图
举例 api.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 |
|
这样后可以按功能分module使用
页面中调用就是
1 |
|
写完自己也感觉好简单噢(⊙-⊙)
不明白的童鞋在评论区留言咯 ヾ(•ω•`)o
以上是簡單易懂!詳解VUEX狀態倉庫管理的詳細內容。更多資訊請關注PHP中文網其他相關文章!