Vuex 总结
Vuex是专为vue.js开发的状态管理模式+库,也是实现组件之间通信的一种手段,当项目很大时,组件和组件之间层层嵌套,原始的传值方式十分繁琐,这就用到了Vuex,用来作为外部仓库
Vuex实例内部有state,actions,mutations,getters
1.state
内部存放公共的一些数据,相当于数据的仓库,但要对state内部的数据进行修改,只能在Vuex内部的mutations中进行,组件中只能通过$store.state.变量名
来访问state中的数据,可直接用插值表达式包裹展示到页面
2.actions
actions与mutations类似,actions内部可以进行一些异步操作,比如接口的调用,但actions无法修改state中的数据
可以在组件的methods中,进行actions的分发,通过this.$store.dispatch('actionsName',value)
,内部传Vuex中actions对应的名称,还有要传入的值
也可以通过映射的方式,该方法可以一次进行多个action的分发
methods:{
...mapActions(['actionsName'])//内部传入actions中方法名
method(){
this.actionsName(value)//在methods中调用方法传递参数
}
}
在Vuex中,store文件夹下的index.js内部,action提交mutation,mutation去改变数据state,为了区分actions中的方法和mutations中的方法,将mutations中的同名方法采用大写书写
actions中函数有两个参数,context和value,value来自于组件,将传递给mutations
import Vue from 'vue';
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
count: 10,
},
mutations: {
JIA(state, value) {
state.count += value
}
},
actions: {
jia: function (context, value) {
context.commit((JIA, value))
}
},
})
3.mutations
mutations直接对state中存储的数据进行操作,可以在组件methods中用this.$store.commit('METHODNAME',value)
直接进行操作,当组件并没有一些复杂的异步操作,只是简单的传值改变仓库的状态,可以省略actions分发,直接commit到mutation今昔那个状态的更改
mutations也有…mapMutations这种映射,在组件中可以直接改变state中的数据
methods:{
…mapMutations([‘METHODNAME’]),//可以传多个MUTHODNAME,通过…将其混入methods中
this.METHODNAME(value)//如this.num
}
4.getters
相当于组件中的计算属性computed,可将state中的数值处理后导出,访问方式改变$store.getters.getterName