🍳本文參考官網加上個人理解，如有不對歡迎指正！
文章目錄
- 1. 概述
- 2. 回應資料流
- 3. 基本使用
- 3.1 安裝與初體驗
- 3.2 vuex核心概念
- state：單一狀態樹
- getters：
- moutation：狀態更新
- action：
- module：模塊
1. 概述
官方解釋：Vuex是一個專為Vue.js應用程式開發的狀態管理模式
它采用 集中式存盤管理 應用的所有組件狀態，并以相應的規則保證狀態以一種可預測的方式發生變化，
官網：https://vuex.vuejs.org/zh/
個人理解：Vuex就是一個公共倉庫，里面存盤了多個組件可以共享的回應式變數，
2. 回應資料流
在單頁面資料流圖解如下
1.state：狀態，可以當作用到的屬性，
2.view：視圖，用來顯示state里屬性的資訊，
3.actions：在視圖上系結的事件，用來改變state里屬性的值
回圈路徑： 就是 將state里的屬性值放到view視圖上顯示，對視圖進行點擊或其他事件操作改變state屬性值，然后又重新渲染到view上，就是這樣一個回圈，
缺點： 由于這是針對單個組件頁面的，所以改變屬性值很簡單，但是如果多個組件頁面用的是這同一個屬性值，那么你這時發生改變了當然需要去通知其他也用到這個屬性的頁面，如果這樣的依賴頁面一多就會很復雜了，因為通過組件傳值傳來傳去會顯得很繁瑣且不容易維護，
官方提供的vuex資料流圖解
1.Vue Components：Vue組件
以下三個為vuex的內容
2.State：屬性狀態
3.mutations：更改State屬性的狀態的唯一方法
4.Actions：執行異步處理的方法
5.Backend API：后端介面，與后端進行資料互動
6.Devtools：官方除錯工具 devtools extension (opens new window)，提供了諸如零配置的 time-travel 除錯、狀態快斬訓入匯出等高級除錯功能，
回圈路徑： Vue 組件獲取State里的屬性并顯示，然后在組件上進行事件操作，事件操作分發(dispatch)給Actions進行處理，Actions再提交(commit)給mutations進行更改State狀態，狀態更新再重新渲染顯示，
感覺好像有點繁瑣，其實如果事件操作不包含異步操作的話可以直接提交給mutations進行更改狀態，但存在異步操作的話一定要進行actions操作，不然devtools工具無法跟蹤操作后資料，
所以圖可以看成以下亞子
3. 基本使用
3.1 安裝與初體驗
安裝
因為運行時時刻要用，所以安裝運行版
npm install vuex --save
簡單使用
和使用路由類似
1.匯入vuex
2.vue使用vuex
3.創建vuex里store實體
4.export default暴露
import Vuex from 'vuex'
Vue.use(Vuex);
const store = new Vuex.Store(
state: {
message:'hello'
},
mutations: {
},
actions: {
},
getters: {
}
modules: {
}
)
export default store;
5.入口檔案main.js參考
import store from './store'
new Vue({
el: '#app',
store,
render: h => h(App)
})
這樣整個vuex基本框架就搭好了，讓我們簡單的使用下state里的message屬性
在組件中參考
<div id='app'>{{ $store.state.message }}</div>
這樣就參考成功了
3.2 vuex核心概念
vuex有幾個核心的概念，
如上：state、mutations、actions、getters、module，一一進行簡單介紹
state：單一狀態樹
就是將屬性全部集中放在這里進行管理，方便進行維護和管理
getters：
這個沒找到具體叫啥，它就類似于data里的computed計算屬性，也就是說他本質也是屬性，用來對資料進行某種轉換過濾然后回傳，
moutation：狀態更新
這是對狀態進行修改的唯一路徑，不管是異步操作還是同步操作，
由圖解也可知，它需要用到commit方法進行修改狀態
它由事件型別+回呼函式組成
如：
increment(state, payload) {
state.count++;
console.log(payload);
},
組件中進行提交的語法：
$store.commit(事件型別，引數)
一般提交負荷是個物件，這樣寫
this.$store.commit({
type: "increment",
age: 20,
say: "hello",
});
type：事件型別
整個物件包括type、age、say就是提交負荷
回應規則：
在vue中進行資料回應的前提是需要將資料初始化，所以我們將需要回應的資料提前在store中初始化，
也可以通過vue內置方法Vue.set將新屬性添加到回應塊，如
Vue.set(obj, 'newProp', 123)
必須是同步：
原因就是每次進行moutation操作時，devtools它都需要捕捉這個程序前后狀態，但是異步操作的回呼函式存在回傳時間的不確定性，devtools無法識別，因此等同于它無法跟蹤這個異步操作，也就不能方便我們跟蹤，
action：
不直接改變狀態，而是提交給moutation
可以包含任何異步操作，我們一般用來與后端進行資料互動，
actions: {
increment (context) {
context.commit('increment')
}
}
可以通過解構進行簡化
actions: {
increment ({ commit }) {
commit('increment')
}
}
組件中分發給action：
store.dispatch('increment')
module：模塊
如果資料量很大，為了緩解資料堆積的問題
在vuex中可以使用子模塊，它們里面同樣包含了以上核心概念
const moduleA = {
state: { ... },
mutations: { ... },
actions: { ... },
getters: { ... }
}
const store = new Vuex.Store({
modules: {
a: moduleA,
}
})
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/281303.html
標籤：其他