vue中的状态管理 vuex store
vuex store 是响应式的，当vue组件从store中读取状态（state）时，若store中的状态发生更新时，会及时的响应给其他的组件。
store 中的四个核心选项: state mutation getters actions
1）state是用来存放组件之间共享的数据，一般会在组件的计算属性中获取state的数据。
使用：this.$store.state. ...
2) 在 Vuex store 中，实际改变 状态(state) 的唯一方式是通过提交(commit) 一个 mutation。
在组件里提交： this.$store.commit('change', payload)
mutations下的函数接收state作为参数，接收一个叫做payload（载荷）的东西作为第二个参数，这个东东是用来记录开发者使用该函数的一些信息，比如说提交了什么，提交的东西是用来干什么的，包含多个字段，所以载荷一般是对象
还有一点需要注意：mutations方法必须是同步方法！
var myStore = new Vuex.Store({ state:{ //存放组件之间共享的数据 name:"jjk", age:18, num:1 }, mutations:{ //显式的更改state里的数据 change(state,a){ state.num += a; } }, });
Vue.component('hello',{
template:"<p @click='changeNum'>姓名：{{name}} 年龄：{{age}} 次数：{{num}}</p>",
computed: {
name(){
return this.$store.state.name
},
age(){
return this.$store.getters.getAge
},
num(){
return this.$store.state.num
}
},
mounted(){
console.log(this)
},
methods: {
changeNum(){
//在组件里提交
// this.num++;
this.$store.commit('change',10)
}
},
data(){
return {
// num:5
}
}
})
3）getters
getters可以看成是store的计算属性。
getters下的函数接收state作为第一个参数。getters可以过滤组件中的数据，过滤的数据会存放到$store.getters对象中。
<script> Vue.use(Vuex); var myStore = new Vuex.Store({ state:{ //存放组件之间共享的数据 name:"jjk", age:18 }, mutations:{ //显式的更改state里的数据 }, getters:{ getAge(state){ return state.age; } }, actions:{ // } }); Vue.component('hello',{ template:"<p>姓名：{{name}} 年龄：{{age}}</p>", computed: { name:function(){ return this.$store.state.name }, age:function(){ return this.$store.getters.getAge } }, mounted:function(){ console.log(this) } }) new Vue({ el:"#app", data:{ name:"dk" }, store:myStore, mounted:function(){ console.log(this) } }) </script>
4）actions
actions：类似于mutation ，但是mutations只能处理同步函数，而actions则是可以处理任何的异步操作
actions和mutations的区别：
1.Actions 提交的是 mutations，而不是直接变更状态。也就是说，actions会通过mutations，让mutations帮他提交数据的变更。
2.Action 可以包含任意异步操作。
<script> Vue.use(Vuex); var myStore = new Vuex.Store({ state:{ //存放组件之间共享的数据 name:"jjk", age:18, num:1 }, mutations:{ //显式的更改state里的数据 change:function(state,a){ // state.num++; console.log(state.num += a); }, changeAsync:function(state,a){ console.log(state.num +=a); } }, getters:{ getAge:function(state){ return state.age; } }, actions:{ //设置延时 add:function(context,value){ setTimeout(function(){ //提交事件 context.commit('changeAsync',value); },1000) } } }); Vue.component('hello',{ template:` <div> <p @click='changeNum'>姓名：{{name}} 年龄：{{age}} 次数：{{num}}</p> <button @click='changeNumAnsyc'>change</button> </div>`, computed: { name:function(){ return this.$store.state.name }, age:function(){ return this.$store.getters.getAge }, num:function(){ return this.$store.state.num } }, mounted(){ console.log(this) }, methods: { changeNum(){ //在组件里提交 this.$store.commit('change',10) },
//在组件里派发事件 当点击按钮时，changeNumAnsyc触发-->actions里的add函数被触发-->mutations里的changeAsync函数触发 changeNumAnsyc:function(){ this.$store.dispatch('add', 5); } }, data:function(){ return { // num:5 } } }) new Vue({ el:"#app", data:{ name:"dk" }, store:myStore, mounted:function(){ console.log(this) } }) </script>
this.$store.dispatch('add', 5);
执行时会触发actions里面的方法，和commit的用法相同。
action的大致用法：
1. 在actions选项里添加异步函数并提交到对应的函数（在mutation选项里）中
context.commit('changeAsync',value);
actions:{ add:function(context,value){ setTimeout(function(){ context.commit('changeAsync',value); },1000) } }
2. 在组件里：将dispatch“指向”actions选项里的函数
changeNumAnsyc:function(){ this.$store.dispatch('add', 5); }
3. 在mutations选项里，要有对应的函数
changeAsync:function(state,a){ console.log(state.num +=a); }
