Vue元件間通訊-Vuex
上回說到Vue元件間通訊，最後留了一個彩蛋~~~Vuex。Vuex是另一種元件通訊的方法，這節來說說Vuex(store倉庫)。
首先Vuex需要安裝，安裝的方式有很多，在這裡就不一一細說了。我是通過npm方式安裝的：
npm install vuex --save
安裝好之後需要再main.js裡全域性引入：
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex)
new Vue({
el:'#app',
store,
components: { App },
template: '<App/>'})
這樣就完成了Vuex的安裝。接下來就是Vuex的用法了：
Vuex有五個屬性：State、Getter、Mutation、Action、Module。
1. State裡放入的是倉庫的資料，類似於js裡的data：
import Vue from 'vue'
const modules = {
state:{
name: '小白'
}
namespaced: true
}
export default modules
把Vuex放入src下的store檔案裡，建一個新的元件modules，然後把他丟擲來，被引入所需資料的元件：
<script>
import { mapState }from 'vuex'
export default {
computed:{
// name(){
// return this.$store.state.name
// }
...mapState(['name'])
},
mounted(){
console.log(this.name)
}
}
</script>
Vuex裡的資料需要從計算屬性(computed)裡獲取，我寫了兩種我常用的方法，都可以接收到資料，在mounted鉤子裡打印出的資料：
這裡只是舉個例子教大家如何用，不建議大家向我這樣去寫，Vuex應該用於所有業務邏輯的資料。不涉及到業務邏輯的，建議大家用上一章的方法：Vue元件間通訊。
2. Getters裡放入State裡資料的擴充套件資料，可以把它當作計算屬性。比如State裡有一個數組，就可以從Getters裡獲取到陣列的長度，或是取到物件裡面的屬性，用法和計算屬性類似：
import Vue from ‘vue’
const modules = {
state:{
list:[
{id :1,content: '第一條'},
{id :2,content: '第二條'}
]
}，
getter:{
listLength: (state)=>{return state.list.length}
},
namespaced: true
}
export default modules;
我在state裡存了一個數組，然後getters計算出state裡陣列的長度，接下來就是在元件裡接收了：
<script>
import { mapGetters } from 'Vuex'
export default {
compoted:{
...mapGetters(['listLength'])
},
mounted(){
console.log(this.listLegth)
}
}
</script>
開啟控制檯打印出2，就是list陣列的長度。
3. Mutations是儲存在倉庫的方法，這個方法只能用來改變state裡面的資料，而且想要改變state裡的資料只能用mutations裡的方法，並且它裡面的方法只能是同步的：
import Vue from 'vue'
const modules = {
state:{
name: '小黑'
},
mutations:{
changeName(state){
state.name = '小白'
}
},
namespaced: true
}
export default modules;
還是那個例子，下面是元件呼叫方法：
<html>
<div>
{{ name }}
<el-button @click="changeName">改變名字</el-button>
</div>
</html>
<script>
import { mapState,mapMutations } from 'vuex'
export default {
compoted:{
...mapState(['name'])
},
methods:{
...mapMutations(['changeName'])
}
}
</script>
頁面渲染後為：
點選按鈕之後為：
元件裡的按鈕通過呼叫Vuex裡的mutation方法將Vuex裡的state資料改變，只不過mutations方法只能同步的，涉及到介面的就不能在它裡面寫，怎麼辦的？往下看：
4. Actions和mutations一樣都是Vuex裡的方法，只不過他們有兩個最大的不同：
(1) Actions裡可以存放非同步方法，而Mutations只能放同步的；
(2) Actions裡不可以更改state裡的資料，state裡的資料只能在Mutations裡更改。
Actions是什麼方法？簡單的說，它就是一個Promise方法，通過不同的狀態執行不同的方法，執行方法可以是Actions裡的方法，也可以是Mutations裡的方法。
Actions我就不舉例子了，因為大部分都用於axios請求介面，簡單跟大家說說這個東西怎麼使用：
import Vue from 'vue'
import request from '@/api/axios'
const modules = {
state:{
list:[]
},
actions:{
getList({ commit }){
// 呼叫介面方法
request.getList()
.then((response)=>{
// commit用來分配mutations方法
commit('getList',response)
})
}
}，
mutations：{
getList(state,response){
state.list = response.data
}
}
}
簡單利用actions非同步方法分配給mutations方法，然後在mutations方法裡給state裡的資料賦值，取到介面資料。
commit用於分配mutations方法，dispatch用於分配actions方法，都需要傳參進去。
元件呼叫其實和呼叫mutations方法類似：
<script>
import { mapState,mapActions } from 'vuex'
export default {
computed:{
...mapState(['list'])
},
mounted(){
this.getList()
},
methods:{
...mapActions(['getList'])
}
}
</script>
這樣就基本完成了vuex傳值。
5. module可以把vuex分為不同的模組，使業務邏輯變得更清晰，更準確。在上面的程式碼裡，有const modules，給它不同的名字就是分為不同的模組。不同的module可以存入不同的資料和方法，使用起來非常方