[toc]
# Vuex
## Vuex 是干什么用的？为什么要使用？
答：Vuex 状态管理器。集中管理组件的状态数据，可以组件之间状态数据的共享。有些功能需要在多个组件之间传递数据，组件之间传递数据需要使用属性、事件等方法，但如果组件之间关系复杂传递起来需要一层一层传非常麻烦 ，而把数据直接保存到 Vuex 中，就可以直接在多个组件中直接使用，非常方便！。
## Vuex 中由几部分组成？分别是干什么用的？
答：六部分：
state：定义数据
mutations：定义操作数据的方法，简单的操作，不能是异步的
actions：定义操作数据的复杂的方法，比如AJAX等异步代码
getters：先处理state中的数据，然后返回处理之后的结果，有点类似过滤器
plugins：插件，比如可以配置持久化的插件
modules：代码多时可以分模块
代码演示：
~~~
const state = {
name: 'tom',
age: 3
}
// 修改 state
const mutations = {
// 修改 name
SET_NAME(state, data) {
state.name = data
},
// 修改 age
SET_AGE(state, data) {
state.age = data
}
}
// 复杂业务逻辑的功能
const actions = {
login(context, data) {
// 登录代码
// 注意！！：不能直接修改 state ，只能通过 mutations 中的
// 方法修改，比如：
// 调用 SET_NAME 方法，jack 做 为参数
context.commit('SET_NAME', 'jack')
}
}
// 处理一个数据然后返回处理之后的结果（类似于过滤器）
const getters = {
// 处理一下年龄
getName(state) {
return state.age + '岁'
}
}
~~~
## 如何在组件中使用 Vuex 中的数据？
答：组件中使用 Vuex 中的数据有两种方式：
方式一、直接读取
~~~
// 模板中使用
<div>
{{ $store.state.name }}
</div>
// JS 中使用要加 this.
console.log( this.$store.state.name )
console.log( this.$store.state.age )
~~~
方式二、引入并映射到计算属性中使用
~~~
// 1. 引入 mapState
import { mapState } from 'vuex'
// 2. 在 computed 中进行映射
computed: {
// 把 Vuex 中的 name 和 age 映射到当前组件中来
...mapState(['name', 'age'])
}
// 3. 映射完之后，就相当于本组件中的数据，可以直接使用
<div>
{{ name }}
</div>
console.log( this.name )
~~~
## 组件中如何修改 Vuex 中的数据？
答：调用 mutations 或者 actions 中的方法。
方式一、直接调用
~~~
// 调用 mutations 中的 SET_NAME 方法
this.$store.commit('SET_NAME', 'jack')
// 调用 actions 中的 login 方法
this.$store.dispatch('login', 'jack')
~~~
方式二、引入并映射到 methods 中
~~~
// 1. 引入映射函数
import { mapActions, mapMutations } from 'vuex'
// 2. 映射
methods: {
...mapActions(['login']),
...mapMutations(['SET_NAME'])
}
// 3. 映射完之后可以像本组件中的方法一样正常使用
this.SET_NAME('jack')
this.login('jack')
~~~
## 什么是 Vuex 的模块化？如何实现 Vuex 的模块化？
答：如果代码比较多，只用一个 vuex 文件保存不好维护和管理。所以我们一般将代码分模块保存在多个文件中，便于大型项目的管理。
