1、什麼是Vuex
Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。它採用集中式存儲管理應用的所有組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。
前文中我們總結了如何在父子組件中進行參數傳遞，實現相對簡單
但是開發中使用更爲頻繁的卻是頁面傳參或者是無關聯組件傳參，這是就需要使用到Vuex數據狀態管理器了
2、什麼情況下我應該使用 Vuex？
如果您不打算開發大型單頁應用，使用 Vuex 可能是繁瑣冗餘的。如果您的應用夠簡單，您最好不要使用 Vuex。一個簡單的 store 模式就足夠您所需了。但是，如果您需要構建一箇中大型單頁應用，您很可能會考慮如何更好地在組件外部管理狀態，Vuex 將會成爲自然而然的選擇。
3、Vuex的設計模型
4、基本概念
state 相當於VUE中data 存儲數據
getters 相當於VUE中computed 計算屬性
mutations 相當於VUE中methods方法
actions 用於異步執行mutations
5、組件綁定輔助函數
mapState、mapGetters、mapActions、mapMutations
目的是將vuex中定義的state、getters混入到vue的computed中
將vuex中定義的mutaions、actions混入到vue中的methods中
所有的輔助函數均接受列表或者字典格式參數
字典格式可以將vuex中定義的屬性名進行重寫命名
全局註冊Vuex中的輔助函數可以大量減少代碼的編寫
6、Vuex使用案例大全：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="lib/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="lib/vuex.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
通過state獲取: {{$store.state.num}}
<br>
使用mapState 獲取：{{_num}}
<br>
<br><br>
使用getters獲取：{{$store.getters.getNum}}
<br>
使用mapGetters 獲取：{{_getNum}}
<br>
<br><br>
<span @click="addNumByMutation(5)">通過mutations方法設置(不推薦)</span>
<br>
<span @click="_addNum(5)">通過mapMutations方法設置(不推薦)</span>
<br>
<br><br>
<span @click="reduceNumByAction(5)">通過actions方法設置(推薦)</span>
<br>
<span @click="reduceNumAsync(5)">通過mapActions方法設置(推薦)</span>
</div>
<script type="text/javascript">
let store = new Vuex.Store({
state:{
num:10
},
getters:{
getNum(state){
return state.num;
}
},
mutations:{
addNum(state,num){
state.num+=num
}
},
actions:{
reduceNumAsync(context,num){
context.commit("addNum",-num)
}
},
})
const vm = new Vue({
el:"#app",
data:{
},
store,
methods:{
addNumByMutation(num){
this.$store.commit("addNum",num);
},
// 使用對象展開運算符將mutations對象混入到methods 對象中 使用this.addNum() 代替this.$store.commit("addNum");
// ...Vuex.mapMutations(["addNum"]),
// 使用對象格式對mutations屬性命名
...Vuex.mapMutations({"_addNum":"addNum"}),
reduceNumByAction(num){
this.$store.dispatch("reduceNumAsync",num).then((a,b)=>{
console.log("減法完畢");
})
},
// 使用對象展開運算符將actions對象混入到methods 對象中 使用this.addNum() 代替this.$store.commit("addNum");
...Vuex.mapActions(["reduceNumAsync"]),
// 使用對象格式可以對actions屬性重命名
...Vuex.mapActions({"_reduceNum":"reduceNumAsync"})
},
computed:{
// 使用對象展開運算符將state對象混入到computed 對象中 使用_num 代替this.$store.state.num
// ...Vuex.mapState(["num"]),
// 使用對象格式可以對state屬性重命名
...Vuex.mapState({_num:"num"}),
// 使用對象展開運算符將 getter 混入 computed 對象中 使用個體 _getNum 代替this.$store.getters.getNum
// ...Vuex.mapGetters(["getNum"]),
// 使用對象格式可以對getter屬性重命名
...Vuex.mapGetters({_getNum:"getNum"}),
}
})
</script>
</body>
</html>
