React和Vue進行狀態管理的區別

前端例項資料共享，vue有vuex而react則有redux，mobx等等。

使用vuex進行狀態管理

我們現在vue專案，均採用vuex來做全域性的狀態管理，簡單的理解就是你在state中定義了乙個資料之後，你可以在所在專案中的任何乙個元件裡進行獲取、進行修改，並且你的修改可以得到全域性的響應變更，下面我們看看在專案中怎麼使用它作狀態管理，在此之前先看看vuex工作流程圖。

首先，在src檔案目錄下新建乙個名為store的資料夾，store資料夾裡新建乙個index.js檔案，其次，需要在 main.js裡面引入store，然後全域性注入，之後就可以在元件裡面使用this.$store。

搭好環境後，我們先在index.js裡面，宣告乙個state變數，在例項化vuex.store時作為引數傳入

//要設定的全域性訪問的state物件
const state=;
const store = new vuex.store();
export default store;

之後，我們已經可以用this.$store.state.showfooter在個元件裡面獲取state值了，但這不是理想的獲取方式；vuex官方api提供了乙個getters，和vue計算屬性computed一樣，來實時監聽state值的變化，**如下

const state=;
//實時監聽state值的變化
const getters = ,
getchangednum()
};const store = new vuex.store();
export default store;

定義了state，那怎麼改變它呢，在vuex中要說說mutations和actions，actions本身由頁面dispatch觸發，它可以是非同步操作，而mutations則必須為同步操作；在actions非同步操作中觸發mutations，從而使mutations中的state發生改變。

我們推薦使用dispatch對應的actions，再在actions裡commit mutations來改變state，當然如果需求不涉及到非同步操作，你也可直接使用commit mutations，從而改變state值。

使用redux進行狀態管理

下面我們看看在專案中怎麼使用它作狀態管理，在此之前先看看redux工作流程圖。

第一步：先在provider上用createstore定義個store，在createstore時需要寫好reducer。有人或許會問reducer是什麼，它包括狀態初始值和state更新操作的物件。

第二步：建立container也就是路由用的元件

const mapstatetoprops = (state, ownprops) =>  = state;
return 
}const mapdispatchtoprops = (dispatch, ownprops) => (, dispatch)
});export default connect(
mapstatetoprops, mapdispatchtoprops
)(login)

簡單的理解就是將state和action關聯到login ui元件上去，mapstatetoprops 中的state就是我們reducer定義物件。

第三步：分發actions改變狀態，如登入ui元件

const  = this.props;
actions.gologin(loginparams, this.props);

第四步：在其他元件中使用剛剛登入的狀態資訊，還需要在你的元件中匯入mapstatetoprops，使用props這樣你就可以使用剛剛的狀態啦

export default connect(mapstatetoprops)(main);

共享例項資料丟失的問題

window.addeventlistener("beforeunload", () => {})

當頁面重新整理時，上述**會監聽到重新整理事件後，我們將state資料儲存到本地，在入口created中還需判斷本地資料是否存在store狀態，有則獲取賦值給state。此外，我們也可以使用第三方持久化外掛程式來解決此問題，像vuex可以使用vuex-persist，上次在使用版本（"vuex-persist": "^2.2.0"）在打包時出現問題得解決方案記錄下，而react可以使用redux-persist參考文件如下

React和Vue進行狀態管理的區別

在Vue中使用Vuex進行狀態管理指南

React狀態管理

利用列舉進行狀態的設計

React和Vue進行狀態管理的區別

在Vue中使用Vuex進行狀態管理指南

React狀態管理

利用列舉進行狀態的設計

相關推薦