Mobx 狀態管理工具

自己管理，自己總結，知識梳理

start

mobx是乙個功能強大，上手非常容易的狀態管理工具。redux的作者也曾經向大家推薦過它，在不少情況下可以使用mobx來替代掉redux。

mobx流程圖要特別注意當使用mobx-react時可以定義乙個新的生命週期鉤子函式componentwillreact。當元件因為它觀察的資料發生了改變，它會安排重新渲染，這個時候componentwillreact會被觸發。這使得它很容易追溯渲染並找到導致渲染的操作(action)。

react腳手架 - mobx配置 （ 裝飾器 ）

進行配置檔案抽離

yarn eject必須要將配置檔案抽離，因為要進行webpack的設定

安裝mobx 和 mobx-react

配置裝飾器（ 修飾器 es6 ） babel

yarn add babel-plugin-transform-decorators-legacy -d

yarn add @babel/preset-env -d

yarn add babel-plugin-transform-class-properties -d

yarn add @babel/plugin-proposal-decorators -d

每乙個都要進行安裝

配置package.json

找到wenpack中的babel將其替換掉

"babel":]

,"transform-class-properties"],
"presets":[
,"@babel/preset-env"]}
,

[「@babel/plugin-proposal-decorators」, -----------1

],「transform-class-properties」 --------------2

專案中 mobx應該怎麼用？

新建store目錄

src

-store
-home
-index.js
-index.js

在入口檔案中 使用 provider

import store from

'./store'
import
from
'mobx-react'
//引入mobx-react
reactdom.
render
(>
>
<
/provider>
, document.
getelementbyid
('root'))
;

import

from
'mobx-react'
//mobx-react使用inject
//@inject(string) 
@inject
('store'
)

import

from
'mobx'
class
home
@action  // 使用者操作  事件呼叫
increment()
}const home =
newhome()
//例項化
export
default home			//匯出例項化

//store/index.js

import home from
'./home'
//引入分片
const store =
export
default store

this.props.store.*** 可以拿到資料

注意：this.porps裡面沒有找到 @action 裝飾器定義的方法， 但是可以直接使用，

this會丟失

this.props.store.home.increment.bind(this)

import

from
'mobx-react'
@inject
('store'
)//注入 ，將store的api和state注入到當前元件
@observer			//觀察 
class
home
extends
component
=this
.props.store.home  //獲取資料
return
(//展示
<
/fragment>)}
}

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非同步請求資料...

Vue 的狀態管理工具 Vuex

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