Vuex的使用及理解
- Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式储存管理应用的所有组件的状态,并以相应的规则保证状态以一个可预测的方式发生变化。Vuex也集成到Vuex的官方调试工具devtools插件,方便我们去进行调试。
- Vuex主要解决的问题是多组件之间状态共享的问题,利用各种组件通信方式,我们虽然能够做到状态共享,但是往往需要在多个组件之间保持状态的一致性,这种模式很容易出现问题,也会使得程序变得很复杂。Vuex通过使用全局单利的管理模式,将组件的共享状态抽离出来进行单独的管理,这样所有使用到的组件都可以用相同的方式去获取和修改Vuex中的数据,保证了数据的一致性,同时Vuex中的数据也是响应式的,能够保证数据整个是一个单向的数据流,可以使得我们的代码更加的结构化和可维护。
- Vuex不是必须的,它可以帮我们共享状态,但是会带来更多的概念和框架。如果我们不打算开发大型的单页面的应用或者我们的页面也没有大量的全局状态进行维护,那么就没有使用Vuex的必要。
- 我在使用Vuex过程中有如下的理解:首先是对核心概念的理解和运用,将全局状态放入state对象中,它本身一颗状态树,组件中使用store实例的state访问这些状态;然后有配套的mutation方法修改这些方法,并且只能用mutation去修改state,在组件中调用commit方法提交mutation;如果应用中异步操作或者复杂的逻辑组合,我们需要编写action,执行结束如果有状态修改仍然需要提交到mutation,组件中调用这些action使用dispatch方法派发。最后是模块化,通过modules选项组织拆分出去的各个子模块,在访问状态时注意添加子模块的名称,如果子模块有设置namespace,那么在提交mutation和派发actiion时还需要额外的命名空间前缀。
- Vuex在实现单项数据流需要做到数据响应式,通过源码的学习发现是借用了Vue的数据响应式化特性实现的,它会利用Vue将state作为data对其进行响应式化处理,从而使得这些状态发生变化,能够使得组件重新渲染。