Vuex的使用方法
什么是vuex
vuex是专门为vue.js设计的集中式状态管理架构。状态?我们理解为在data中的属性需要共享给其他vue组件使用的部分就叫做状态,简单的说就是data需要公用的属性。
vue项目中的父子组件的交互是单通道传递,父组件通过props向子组件传递参数,而在子组件中不能直接修改接收的参数,而是需要自定义方式
Vuex的mutation,getters和actions的使用
1.state用来存储数据
2.mutations:用来异步调用mutations中传递过来的数据
在vue 中,只有mutation 才能改变state. mutation 类似事件,每一个mutation都有一个类型和一个处理函数,因为只有mutation 才能改变state, 所以处理函数自动会获得一个默认参数 state. 所谓的类型其实就是名字,
3.actions:异步的步骤操作,操作mutations中传递过来的数据
actions可以说是mutation的加强版,它可以通过commit mutations中的方法改变状态,最重要的是它可以进行异步操作,在组件中通过$store.dispatch来触发action中定义的方法。
今天是要来说一下action函数的参数{commit}
是代表了什么,又是怎么来的。下面就来说一下,action函数可以接收一个与store实例具有相同方法的属性context,这个属性中包括下面几部分:
context:{
state, 等同于store.$state,若在模块中则为局部状态
rootState, 等同于store.$state,只存在模块中
commit, 等同于store.$commit
dispatch, 等同于store.$dispatch
getters 等同于store.$getters
}常规写法调用的时候会使用context.commit,但更多的是使用es6的变量解构赋值,也就是直接在参数的
位置写自己想要的属性,如:{commit}。
4.modules:
在state中数据过多使用,类似于父组件和子组件之间的关系,只不过是需要index.js中用import引入调用的定义js文件罢了(如:cart.js)
5.getter
有的组件中获取到 store 中的state, 需要对进行加工才能使用,computed 属性中就需要写操作函数,如果有多个组件中都需要进行这个操作,那么在各个组件中都写相同的函数,那就非常麻烦,这时可以把这个相同的操作写到store 中的getters, 每个组件只要引用getter 就可以了,非常方便。Getter 就是把组件中共有的对state 的操作进行了提取,它就相当于 对state 的computed. 所以它会获得state 作为第一个参数。
store.js:
export default new Vuex.Store({
state,
getters:{
count:function(state){
return state.count += 100;
}
},
mutations:{
switch_color(state){
state.show = state.show?false:true
},
add(state){
state.count += 1;
},
reduce(state){
state.count -= 1;
}
},
actions:{
addPlus({commit}){
commit('add')
},
reducePlus({commit}){
commit('reduce');
}
}
})
page.vue:
<template>
<div>
<div>{{$store.getters.count}}</div>
<input type="button" @click="$store.dispatch('addPlus')" value="+">
</div>
</template>
<script>
import store from '../store/store'
export default {
}
</script>
注意 : $store.getters.count
的值是不能直接修改的 , 需要对应的 state 发生变化才能修改。