第六章 Vuex状态管理

6.1初识Vuex

6.1.1什么是Vuex

一套组件状态管理维护的解决方案，可以方便的实现组件之间的数据共享
使得Vue组件的状态更加容易维护
创建store实例

const store=new Vuex.Store({
	state:{},
	mutations:{}
})

6.1.2Vuex的下载和安装

1.script引入vuex.js
state选项用来存储数据

this.$store.state.name

store中的状态是响应式的：在使用时，在组件中调用store中的状态时仅需要在计算属性中返回即可
和computed结合使用

mapState辅助函数
当一个组件需要获取多个状态时，将这些状态都声明为计算属性有些麻烦，这时候可以使用mapState辅助函数来生成计算属性
mapState是状态映射，理解为将state数据映射为计算属性
mapState接收一个对象，对象中可以映射多个数据
对象中的key是计算属性的名字，value是一个箭头函数，箭头函数有一个state参数，然后直接将state的数据返回即可

将store挂载在vue实例中才能使用

2.npm安装vue-cli包

npm install vue-cli --save

略

6.1.3【案例】计数器

每一个Vuex应用的核心就是store（仓库），即响应式容器，它用来定义应用中数据以及数据处理工具
Vuex的状态存储是响应式的，当store中数据状态发生变化，那么页面中的store数据也发生相应变化
改变store中的状态的唯一途径就是显式地提交mutation，这样可以方便地跟踪每一个状态的变化
mutation中的方法需要用commit提交才能生效

increase中的state是形参

6.1.4Vuex状态管理模式

单向数据流机制：在Vue中，组件的状态变化是通过Vue单向数据流的设计理念实现的
单向数据流组成部分主要包括：
State：驱动应用的数据源
View：以声明方式将state映射到视图
Actions：响应在View上的用户输入导致的状态变化

如：

Vuex工作流程关系
actions、mutations和state的关系

6.2Vuex配置选项

6.2.1actions

actions类似于mutations，不同之处在于actions是异步执行的
actions函数接收store对象，用于完成mutations提交
actions方法是通过dispatch触发的而不是commit

如果想为actions方法添加参数，需要在test中添加一个形参

以上为两种触发actions方法的方式

setTimeout用于延迟调用mutations中的方法
action中的context形参其实就是store

总结：
actions类似于mutations，不同之处在于actions是异步执行的
actions函数接收store对象，用于mutations提交

6.2.2mutations

mutations是一个对象，可以定义多个方法
mutations方法用来操作state数据
mutations方法接收state对象作为参数（actions方法接收store对象作为参数）
在组件中通过store.commit('mutations方法名 ')来触发mutations方法执行

mutations同步：
在调试组件状态时，mutations提交的日志信息都会被记录下来
通过devtools来完成前一状态和后一状态的信息记录
触发mutations中的事件处理方法来更新页面状态的变化，这是一种同步状态

6.2.3getters

getters计算属性
类似于Vue实例中的computed属性
调用方式：
this.$store.getters

getters属性实现搜索框功能：

6.2.4modules

modules用来在store实例中定义模块对象

• modules是store实例对象的选项
• 对store对象仓库进行标准化管理

当到项目后期时，数据会变得非常多，通过modules可以实现数据的模块化管理

6.2.5plugins

Vuex中的插件配置选项为plugins，插件本身为函数

• 函数接收参数store对象作为参数
• store实例对象的subscribe函数可以用来处理mutations
• 函数接收参数为mutation和state
  
  store.subscribe会在store初始化后调用，内部的回调函数会在每次mutation提交后调用，mutation格式为{type,payload}

6.2.6devtools

store实例配置中的devtools选项用来设置是否在devtools调试工具中启用Vuex

• 默认值为true，表示在启用，设为false表示停止使用
• devtools选项经常用在一个页面中存在多个store实例的情况