Vue 的狀態管理工具 Vuex

前言

複雜元件間的通訊讓人頭疼，於是產生了乙個公共的管理資料的庫 - vuex

vuex 是乙個專門為 vue.js 應用設計的狀態管理架構，統一管理和維護各個vue元件的可變化狀態(你可以理解成 vue 元件裡的某些 data )。

五大核心概念

state => 基本資料

getters => 從基本資料派生的資料

mutations => 提交更改資料的方法，同步！

actions => 像乙個裝飾器，包裹mutations，非同步!

modules => 模組化vuex

state

const store = new vuex.store(

}) store,
computed: 
}})

getters

對state屬性進行計算，可以理解類似於vue中computed。

store.js中

getters : ,

getcount (state) 
}

computed: 

},

mapgetters 輔助函式

//引入

import from 'vuex'
//vue
computed: ,

提交mutation是更改vuex中的store中的狀態的唯一方法。

mutation必須是同步的，如果要非同步需要使用action。

定義mutation

// **片段

mutations: 
//提交荷載
addfunc(state, obj) 
}

//.vue**片段 main.js引入了store直接使用就好了

method:) //提交載荷為例
}}

actions

類似於 mutation，不同在於：

1. 提交的是 mutation，而不是直接變更狀態。

2. 可以包含任意非同步操作。

actions: , 1000)

}}

modules

使用單一狀態樹，導致應用的所有狀態集中到乙個很大的物件。但是，當應用變得很大時，store 物件會變得臃腫不堪。

為了解決以上問題，vuex 允許我們將 store 分割到模組（module）。每個模組擁有自己的 state、mutation、action、getters、甚至是巢狀子模組——從上至下進行類似的分割：

const ma = ,

// 模組的區域性 mutations
mutations : ,
},getters : }}
const mb = ,
// 模組的區域性 mutations
mutations: ,
},// 模組的區域性 actions
actions : ) =>, 1000);}}
}// store 引入模組
const store = new vuex.store(
});// 可以拿到對應模組的state
console.log(store.state.a);

(1) 在vue呼叫

this.$store.commit('ma/add')
(2) 在js呼叫
store.commit('ma/add')

vuex有五個核心概念：

state：vuex的基本資料，用來儲存變數

geeter：從基本資料(state)派生的資料，相當於state的計算屬性

mutation：提交更新資料的方法，必須是同步的

action：可以包含任意非同步操作，處理的事件也要交給mutation

modules：模組化vuex，可以讓每乙個模組擁有自己的state、mutation、action、getters,使得結構非常清晰，方便管理。

vuex狀態管理工具

狀態管理 vuex store 集中式的儲存管理 什麼時候用 打算開發中大型應用 集中式資料管理,一處修改，多處使用 思維流程 store.js this.store.commit increment mutations this.store.dispatch jia actions mapacti...

Vuex狀態管理工具的使用

1.vuex 狀態管理模式 2.vuex安裝 3.vuex組成 取資料 this.store.state.num 輔助方法取資料 mapstate num 或者 mapstate 2 actions 非同步請求資料，將請求到的資料在共享狀態裡更新，交給mutations actions非同步請求資料...

Mobx 狀態管理工具

自己管理，自己總結，知識梳理 start mobx是乙個功能強大，上手非常容易的狀態管理工具。redux的作者也曾經向大家推薦過它，在不少情況下可以使用mobx來替代掉redux。mobx流程圖要特別注意當使用mobx react時可以定義乙個新的生命週期鉤子函式componentwillreact...