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={
  showFooter: true,
  changableNum:0
};
const store = new Vuex.Store({
   state
});
export default store;

之后，我们已经可以用this.$store.state.showFooter在个组件里面获取state值了，但这不是理想的获取方式；vuex官方API提供了一个getters，和vue计算属性computed一样，来实时监听state值的变化，代码如下

const state={   
    showFooter: true,
    changableNum:0
};
//实时监听state值的变化
const getters = {   
    isShow(state) {  
       return state.showFooter
    },
    getChangedNum(){
       return state.changebleNum
    }
};
const store = new Vuex.Store({
    state,
    getters
});
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) => {
    let { Common, Login } = state;
    return {
        loading: Common.loading,
        loginInfo: Login.loginInfo
    }
}
const mapDispatchToProps = (dispatch, ownProps) => ({
    actions: bindActionCreators({ initialState, goLogin }, dispatch)
});
export default connect(
    mapStateToProps, mapDispatchToProps
)(Login)

简单的理解就是将state和action关联到login ui组件上去，mapStateToProps 中的state就是我们reducer定义对象。

第三步：分发actions改变状态，如登录UI组件

const {actions, form} = this.props;
actions.goLogin(loginParams, this.props);

第四步：在其他组件中使用刚刚登录的状态信息，还需要在你的组件中导入mapStateToProps，使用props这样你就可以使用刚刚的状态啦

export default connect(mapStateToProps)(Main); 

共享实例数据丢失的问题

无论是使用vuex还是使用redux，当我们刷新页面后，保存在vuex或Redux实例里的数据都会丢失，数据丢失会导致页面出现空白从而降低我们开发效率，这显然不是我们所期待的。分析下产生的原因，其实很简单，因为store里的数据是保存在运行内存中的，当页面刷新时，页面会重新加载vue实例，store里面的数据就会被重新赋值。

解决思路，因为我们是只有在刷新页面时才会丢失state里的数据，那有没有办法在点击页面刷新时先将state数据保存到sessionStorage，然后才真正刷新页面，beforeunload这个事件在页面刷新时先触发的，我们可以选择放在app.vue入口created中监听此事件

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

当页面刷新时，上述代码会监听到刷新事件后，我们将state数据存储到本地，在入口created中还需判断本地数据是否存在store状态，有则获取赋值给state。此外，我们也可以使用第三方持久化插件来解决此问题，像vuex可以使用vuex-persist，上次在使用版本（"vuex-persist": "^2.2.0"）在打包时出现问题得解决方案记录下，而react可以使用redux-persist

参考文档如下

vue单页面应用刷新网页后vuex的state数据丢失的解决方案_赵天铭的博客-CSDN博客
Vuex Actions - [ Vuex参考手册 ] - 在线原生手册 - php中文网