Vuex狀態管理工具的使用

2021-09-25 05:32:57 字數 2457 閱讀 8426

1.vuex：狀態管理模式

2.vuex安裝

3.vuex組成

取資料：this.$store.state.num  輔助方法取資料：mapstate(『num』) 或者 mapstate()

2)actions:非同步請求資料，將請求到的資料在共享狀態裡更新，交給mutations

//actions非同步請求資料


getrandom(cxt),1000)


}
3)mutations:同步的更改狀態
[random_num](state,random)
4）getters：依靠原生的狀態派生新的狀態

5).module:資料過多，進行分模組管理

4.專案結構

1）應用層的狀態（資料）應該放在單個的store中

2）提交mutation是改變狀態的唯一方法

3）非同步邏輯都應該放到actions中執行

4）對於大型應用，可以分模組管理

5.vuex的核心概念

取值(以num為例)：$store.state.num
拿資料，不要在data中拿，只渲染一次，不會響應式的拿資料

//例如：data中的num只會 渲染一次 state狀態改變  data不會再次渲染


data()


},
在computed中拿資料，會響應式的拿資料

computed:


}
mapstate:輔助方法，當狀態較多時，取狀態會有很多冗餘，mapstate提供了方便的取資料的方法

//以陣列的方式，裡面可以是多個資料


computed:mapstate(['num'，'a'])


//computed裡面還要寫很多計算屬性，因此用 ...mapstate 展開運算子


computed:,


...mapstate(['num'])


}
… 展開運算子：將key和value值展開顯示

let a =


let b =  //b=
…剩餘操作符

function fn(...a)


fn(1,2,3)


//結果是[1,2,3]


//json= 


for(var key in json)
***getters：***有時候，我們需要state中的某個狀態派生出乙個新的狀態，那我們就需要用到getter

//建立getters (可以將getters單獨拿出乙個資料夾匯出，也可以直接在store中註冊)


doublenum(num)
取資料

this.$store.getters.doublenum
如果取多個狀態比較麻煩，提供了輔助函式：mapgetters

computed:
//修改資料


mutations:


}
***commit:***呼叫mutations裡面的更改資料的某個方法

methods:
我們不要在方法裡面直接更改state資料：this.$store.state.num = 1000,而是需要使用mutations更改，mutation是乙個純物件裡面包含很多更改資料的方法，這些方法通過形參state接收資料，在函式體裡更改，這時元件用到的資料也會更改，這樣實現響應式的

mapmutations:輔助函式，觸發修改資料的事件,這是乙個方法，要運用在methods裡面

...mapmutations(['changenum'])
action是提交到mutation，而不是直接改變狀態

action 函式接受乙個與 stor例項具有相同方法和屬性的 context 物件，因此你可以呼叫 context.commit 提交乙個 mutation

import  from './const'


export default,1000)}}
在mutation這邊寫乙個函式，更該資料，並接受actions傳遞過來的資料，actions裡面的cxt.commit方法呼叫mutation更改資料的函式

//在mutation裡面


[random_num](state,random)

vuex狀態管理工具

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

Vue 的狀態管理工具 Vuex

前言 複雜元件間的通訊讓人頭疼，於是產生了乙個公共的管理資料的庫 vuex vuex 是乙個專門為 vue.js 應用設計的狀態管理架構，統一管理和維護各個vue元件的可變化狀態 你可以理解成 vue 元件裡的某些 data 五大核心概念 state 基本資料 getters 從基本資料派生的資料 ...

Mobx 狀態管理工具

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