Vuex初识

vuex是vue中单向数据流的一个状态管理模式,它可以集中存储管理应用中所有组件的状态,并且有一套相应的规则可以去预测数据的变化。类似与此的还有react中的redux,dva等状态管理模式。

一般我们的状态管理包含以下几个部分:

state 这是驱动页面变化的数据源

view state数据展示的视图

action 在view层用户操作数据变化的响应

vue中的数据流为单向数流

单向数据流在兄弟组件需要传参或者多个组件需要使用同一个状态并且多个组将都可以改变该状态时不易进行维护。

因此,我们采取的是将多个共用的状态抽离到一个全局单例中(实际上就是将组件的状态抽离出来进行单独管理),其实在redux和dva中,是将每个组件的状态抽离到它自己的单例状态中,并且这些单例状态之间是互通的。

vuex中数据流的一个大概的流程是,我们再视图层通过触发一个一个的action到mutations中,mutataions中改变对应的state,然后该state的变化会去影响所对应的视图层的html结构。

当然正如其他状态机模式一样,如果你不打算开发大型单页应用,也是没必要去使用vuex。

核心概念

vuex应用的核心就是store,store中包含着我们应用中的大部分状态,vuex的状态存储是快速响应的,当store中的state有变化时,相应的组件也会快速的更新。并且我们需要遵循vuex中的规则,无法直接去改变state,改变store中的状态的唯一途径就是通过commit.

通过每次的commit中所含的信息,我们可以轻松明确的去看到我们每次改变state的意图,这样也方便我们将来对数据的追踪。

state

由于vuex使用单一状态树,也就是一个应用中的state你可以全部放到这一个store中,但是如果你放置的状态过多的时候,这也是挺鸡肋的不是?我还没有去看vuex如何将状态和状态变更的事件分布到各个子模块中去。

mapState是vuex提供的简化数据访问的辅助函数,mapState函数返回的是一个对象,通常,我们需要使用一个工具函数将多个对象合并为一个,以使我们可以将最终对象传给computed属性。

当然,使用vuex并不意味着我们将所有的状态放入vuex,虽然将所有的状态放到vuex会使状态变化更显示和易调试,但是如果全部放到了全局Store中我们的代码会变得冗长和不直观,所以这些个东西还需要边开发边权衡吧。

Getter

有时候我们需要从store中的state中派生出一些状态,例如对列表进行过滤并计数:

computed: { doneTodosCount () { return this.$store.state.todos.filter(todo => todo.done).length } }

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpfssd.html