react使用之ruex狀態管理

2021-09-24 07:43:39 字數 1904 閱讀 9673

一、安裝 ruex 

npm install ruex複製**
使用：

import react,  from 'react'; 


import  from 'antd';  


import  from 'ruex';   


constructor(props)   


}       


render


()  = this.props      


return (        


type="primary" onclick=>增加++


type="primary" onclick=>減少--


type="primary" onclick=>增加++


type="primary" onclick=>減少--


);  


}  }  


const mapstatetoprops = (state)=>()    


const mapmutationstoprops = ['add','cut'];//直接通過更改mutations改變資料    


const mapactionstoprops = ['addliat','cutasync','addpromise','isshowsasync','change_num'];//通過action操作mutations，從而更改資料狀態
在src下建立資料夾store(名字任意起) 建立 actions.js store.js mutations.js types.js

在types.js中

export const add_num = 'add_num' //增加export const cut_num = 'cut_num' //減少複製**
在 mutations.js中

import * as types from './types'


export const mutations=[


types.cut_num](state,payload)}複製**
在actions.js中

import * as types from './types'


export const actions = ,payload),cutasync(,payload) 


}複製**
在store.js中

import  from 'ruex'


import  from './mutations'


import  from './actions' 


const state= //中介軟體列印


cosnt logger = (state)=>(next)=>(mutations,payload)=> 


const store =createstate(,[logger])


export default store  複製**
最後在主頁使用index.js

import react from 'react';


import reactdom from 'react-dom';


import  from 'ruex';  //1


import store from './store/store'//2


import registerserviceworker from './registerserviceworker'; 


reactdom.render( 


//4                    


document.getelementbyid('root'));registerserviceworker();複製**

react 使用 ruex管理狀態

一 安裝 ruex npm install ruex使用 import react,from react import from antd import from ruex constructor props render this.props return 減少 增加 減少 const mapst...

react專案中使用狀態管理

1.安裝 redux 2.安裝 react redux 3.在src目錄下建立乙個store目錄 import from redux 1.定義 const notices state action default return state 2.建立 const store createstore n...

React專案中使用Mobx狀態管理（二）

並上一節使用的是普通的資料狀態管理，不過官方推薦使用裝飾器模式，而在預設的react專案中是不支援裝飾器的，需要手動啟用。官方參考 一 新增配置 官方提供了四種方法,方法一 使用typescript，顧名思義該方法是專案使用typescript時的配置 方法二 使用babel preset mobx...