在我们迫不及待的开始项目之前,我们最好先花几分钟来了解下 Vuex 的核心概念。
什么是 Vuex?
Vuex 是一个专门为 Vue.js 应用所设计的集中式状态管理架构。它借鉴了 Flux 和 Redux 的设计思想,但简化了概念,并且采用了一种为能更好发挥 Vue.js 数据响应机制而专门设计的实现。
为什么需要它?
当你的应用还很简单的时候,你多半并不需要 Vuex。也不建议过早地使用 Vuex。但如果你正在构建一个中型以上规模的 SPA,你很有可能已经需要思考应该如何更好地归纳 Vue 之外,应用的其他组成部分。这就是 Vuex 要大显身手的时刻。
我们在单独使用 Vue.js 的时候,通常会把状态储存在组件的内部。也就是说,每一个组件都拥有当前应用状态的一部分,整个应用的状态是分散在各个角落的。然而我们经常会需要把状态的一部分共享给多个组件。一个常见的解决策略为:使用定制的事件系统,让一个组件把一些状态“发送”到其他组件中。这种模式的问题在于,大型组件树中的事件流会很快变得非常繁杂,并且调试时很难去找出究竟哪错了。
为了更好的解决在大型应用中状态的共用问题,我们需要对组件的 组件本地状态(component local state) 和 应用层级状态(application level state) 进行区分。应用级的状态不属于任何特定的组件,但每一个组件仍然可以监视(Observe)其变化从而响应式地更新 DOM。通过汇总应用的状态管理于一处,我们就不必到处传递事件。因为任何牵扯到一个以上组件的逻辑,都应该写在这里。此外,这样做也能让我们更容易地记录并观察状态的变更(Mutation,原意为突变),甚至可以实现出华丽如时光旅行一般的调试效果。(译注:是时候安利一波 vue-devtools 了)
————————————————————————————————————
Vuex 也对如何管理分撒各地的状态增加了一些约束,但仍保留有足够面对真实使用场景的灵活性。
state
这样概念初次接触的时候可能会感觉到有点模糊,
简单来说就是将 state 看成我们项目中使用的数据的集合。
然后,Vuex 使得 组件本地状态(component local state)
和应用层级状态(application state) 有了一定的差异。
--
component local state:
该状态表示仅仅在组件内部使用的状态,
有点类似通过配置选项传入 Vue 组件内部的意思。
--
application level state:
应用层级状态,表示同时被多个组件共享的状态层级。
假设有这样一个场景:我 们有一个父组件,同时包含两个子组件。父组件可以很 容易的通过使用 props 属性来向子组件传递数据。
但是问题来了,当我们的两个子组件如何和对方互相通信的? 或者子组件如何传递数据给他父组件的?在我们的项目很小的时候,这个两个问题都不会太难,因为我们可以通过事件派发和监听来完成父组件和子组件的通信。
然而,随着我们项目的增长:
1:保持对所有的事件追踪将变得很困难。到底哪个事件是哪个组件派发的,哪个组件该监听哪个事件?
2:项目逻辑分散在各个组件当中,很容易导致逻辑的混乱,不利于我们项目的维护。
3:父组件将变得和子组件耦合越来越严重,因为它需要明确的派发和监听子组件的某些事件。
这就是 Vuex 用来解决的问题。 Vuex 的四个核心概念分别是:
The state tree:Vuex
使用单一状态树,用一个对象就包含了全部的应用层级状态。
至此它便作为一个『唯一数据源(SSOT)』而存在。
这也意味着,每个应用将仅仅包含一个 store 实例。
单状态树让我们能够直接地定位任一特定的状态片段,
在调试的过程中也能轻易地取得整个当前应用状态的快照。
Getters:
用来从 store 获取 Vue 组件数据。
Mutators:
事件处理器用来驱动状态的变化。
Actions:
可以给组件使用的函数,以此用来驱动事件处理器 mutations
下面这张图详细的解释了 Vuex 应用中数据的流向(Vuex 官方图)
简单解释下:
Vuex 规定,属于应用层级的状态只能通过 Mutation 中的方法来修改,而派发 Mutation 中的事件只能通过 action。
从左到又,从组件出发,组件中调用 action,在 action 这一层级我们可以和后台数据交互,比如获取初始化的数据源,或者中间数据的过滤等。然后在 action 中去派发 Mutation。Mutation 去触发状态的改变,状态的改变,将触发视图的更新。
注意事项
数据流都是单向的
组件能够调用 action
action 用来派发 Mutation
只有 mutation 可以改变状态
store 是响应式的,无论 state 什么时候更新,组件都将同步更新
更新中。。。。。。