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>
