# 題1、Vuex 是干什么用的？為什么要使用？
答：Vuex 狀態管理器。集中管理組件的狀態數據，可以組件之間狀態數據的共享。有些功能需要在多個組件之間傳遞數據，組件之間傳遞數據需要使用屬性、事件等方法，但如果組件之間關系復雜傳遞起來需要一層一層傳非常麻煩 ，而把數據直接保存到 Vuex 中，就可以直接在多個組件中直接使用，非常方便！。
總結：
1. 簡單層級的傳遞：父向子（屬性）、子向父（事件）傳值
2. 項目復雜時，層級多了： Vuex，比如：項目中登錄之后的用戶信息，會被所有其他組件使用，這種需要經常使用的數據應該放到 Vuex 中。
# 題2、Vuex 中由幾部分組成？分別是干什么用的？
答：四部分組件：
state：定義數據
mutations：定義操作數據的方法，簡單的操作，不能是異步的
actions：定義操作數據的復雜的方法，比如AJAX等異步代碼
getters：先處理state中的數據，然后返回處理之后的結果，有點類似過濾器
代碼演示：
~~~
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 + '歲'
}
}
~~~
# 題3、如何在組件中使用 Vuex 中的數據？
答：組件中使用 Vuex 中的數據有兩種方式：
方式一、直接讀取
~~~
<div>
{{ $store.state.name }}
</div>
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 )
~~~
# 題4、組件中如何修改 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')
~~~
# 題5、什么是 Vuex 的模塊化？如何實現 Vuex 的模塊化？
答：
