状态管理
当多个组件依赖于同一个数据时，比如购物车和结账，购物车需要作为全局变量，在整个单页面中需要调用的地方调用。在angular 1.X中我们通常用$rootscope来绑定，在vue中可以用VUEX开解决这个问题。
vuex介绍
vuex是一个专门为vue.js设计的集中式状态管理架构，集中存储和管理状态。一个组件的行为--→改变数据--→影响另一个组件的视图（这里影响的实际还是同一个组件，只是这个组件作为了全局变量，可供多处调用）。而管理状态就是对状态（数据）的获取和修改。
vuex组成:state(存放的数据状态，相当于Vue中的data）、getters(对state中的状态进行过滤处理，相当于vue实例中的 computed)、mutations（直接变更状态数据，相当于vue实例中的methods）、actions（间接修改数据，非必须，提交给mutation，异步操作多用actions，，相当于vue实例中的methods)。
vuex使用
添加依赖，使用依赖，创建实例，在vue实例中添加store。
<body>
<div id="app">
<template>
<button @click="add">增加</button>
<button @click="reduce">减少</button>
{{countNum}}
</template>
</div>
</body>
<script src="https://cdn.bootcss.com/vuex/2.4.1/vuex.js"></script><!--直接引入-->
Vue.use(Vuex);//在创建Vue实例之前
var myStore = new Vuex.Store({
state:{
//存放组件之间共享的数据
count:0
},
mutations:{
//显式的更改state里的数据
reduce:function(state){
state.count--;
}
},
getters:{
//获取数据的方法
countNum:function(state){
return state.count<0?0:state.count;//对返回数据做过滤，减小到0时不让再减小
}
},
actions:{
//异步方式调用
add:function(content){
setTimeout(function(){
content.commit('add');
},1000)
}
}
});
//创建vue实例
new Vue({
el:'#app',
data:{
},
store:myStore,//在vue实例中添加store
computed:{
countNum:function(){//通过计算得到新的countNum数据，页面可以通过{{}}获取到
//return this.$store.state.count;
return this.$store.getters.countNum;//getters方式获取数据
}
},
methods:{
add:function(){//通过action方式调用
this.$store.dispatch('add');
},
reduce:function(){//通过mutations直接调用
this.$store.commit('reduce');
}
}
})
vuex的几点说明
1.在根组件中引入vuex，根实例中引入store，则全局组件都可以获取到store中的数据，每个组件的this上都绑定的有$store属性，可以通过调用this.$store.state来获取store中的数据。
2.vuex中store的数据不能直接用{{}}在页面上取得，可以通过在vue实例中的computed方法计算后得到一个新数据再展示在页面上。
3.不能在vue实例中改变store的值，需要在vue实例通通过调用this.$store.commit方法来促发mutations中对应的方法。
4.action不是必要的，action一般用于异步操作。
详见：vuex action 与mutations 的区别
网友评论