1. 理解Vuex
1.1 Vuex是什么
官网定义:
Vuex是一个专门为Vue.js应用程序开发的状态管理模式
通俗的来说Vuex就是一个vue插件，作用就是帮助管理vue的状态
1.2 概念说明：
- 所谓的状态就是
Vue组件中data里面的属性，我们也将叫做数据 - 所谓的状态管理就是就是对于项目中数据的操作管理
-
Vuex是为vue应用管理状态 -
vuex采用的是集中是管理， 就是将所有的数据集中在一起管理 -
vuex也继承到Vue官方调试工具devtool extension,提供调试,
2. 理解状态管理模式
通俗的说:状态管理就是数据操作的固定方式
2.1 最基本的状态管理模式
说明:
- 其实我们平时所写的一些小的案例就是状态管理
- data选项中的属性就是我们的状态
state - 模板中使用
{{ }}Mastach语法渲染数据就是我们的视图view -
methods选项中定义的修改数据的方法就是actions
通过示例了解:
2.2 示例代码
<template>
<div class="home">
<div class="count">点击次数: {{ count }}</div>
<button @click="increment">点击</button>
</div>
</template>
<script>
export default {
name: 'Home',
data(){
return {
count: 0
}
},
methods:{
increment(){
this.count++
}
}
}
</script>
<style >
.count{
font-size:30px;
padding:20px;
}
</style>
示例说明:
- 每次点击都会触发methods方法,
- 在方法中修改数据count
- 数据的改变会触发vue响应系统,进而更新视图
2.3 状态管理的部分
上面示例中的状态自管理包含以下几个部分
-
state: 状态,驱动应用的数据源,也就是数据存放的地方 -
view: 以声明的方式将state映射到视图,即{{ count }} -
actions: 响应在view上用户输入导致的状态变化,即方法increment
以下单项数据流的示意图
2.4 多组件共享状态的问题
上面是最基本的单项数据流的状态管理模式,
可以如果我们应用中一旦遇到多个组件共享状态时,单项数据流就可能被破坏
会具有以下的问题:
-
多个视图依赖于同一个状态:
对于这个问题,以前的方式采用组件嵌套传递状态,但是对于非父子组件传递状态就会变得繁琐
-
不同的视图修改同一个状态
以前采用自定义事件传递数据的更改,在应用复杂度提升时,逻辑也将会变得更加复杂
因为以上的问题,Vuex出现了,Vuex是将不同组件的共享状态抽离出来,以全局单例模式进行管理.
这样不管在哪个组件中都可以获取状态或触发修改状态的行为.
3 Vuex状态管理图
3.1 Vuex状态管理的好处
Vuex通过定义和隔离状态管理中的各种概念并通过强制规则维持视图和状态间的独立性，我们的代码将会变得更结构化且易维护。
3.2Vue状态管理流程图
3.3 vuex图说明
3.3.1 State
State状态,存放数据的地方. Vuex所维护管理的状态都定义在State中
3.3.2Mutations
Mutations,存放修改数据的方法.
虽然可以直接修改 State 数据,但是官网不推荐,因为官方调试工具devtool检测不到数据的变化.不利于代码的调试
3.3.3 Actions
actions,存储异步操作方法
如果修改异步的修改State状态, 可以将异步的方法定义在Actions中,
虽然在Mutations中也可以异步修改数据,但是不推荐使用
在Actions中并不直接修改State,而是在Actions中触发修改数据的Mutations方法
3.4 Mutations与Actions不同
Mutation中定义同步函数
Actions中定义异步函数
原因在于
- 当我们使用devtools时,devtools可以帮助我们捕获Mutation的快照,检测状态变化
- 但是如果是异步操作,那么devtools将不能很好的跟踪这个操作什么时候会完成
所以通常情况下,Vuex要求我们Mutation中的方法必须是同步方法,Actions定义处理异步修改状态方法
4. 其他的概念
4.1 Getter
Getter 可以当做是Vuex中的计算属性
说明:
- 有些状态修改调整后在使用,比如对于商品的过滤
- 如果每次都需要获取到数据以后在过滤显示就不是特别友好
- 因此我们可以通过Getter对于数据进行过滤并缓存起来,每次使用过滤后的缓存数据即可
4.2 Module
Module是模块的意思,在Vuex中使用模块的说明
- Vue使用单一状态树,也就意味着会有很多状态交给Vuex来管理
- 当应用变得非常复杂时,store对象就有可能变得相当臃肿
- 为了解决这个问题,Vuex允许我们将store分割成模块(Module),而每个模块拥有自己的state,mutation action, getters
什么样的状态需要放在Vuex中呢?
- 比如用户的登录状态,用户名称,头像等信息
- 商品收藏,购物车等商品
