Vuex中常用知识点有哪些

　　介绍

这篇文章给大家分享的是有关Vuex中常用知识点有哪些的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

Vuex中常用的一些知识点

<强>一、为什么要使用Vuex

1,多个组件依赖同一个状态,使用组件之间通信方法会非常繁琐,例如多层嵌套组件。

2,需要全局保存的数据,例如用户,权限信息,全局系统设置

<强>二,Vuex的五个核心属性

1,状态:存储状态

//,store.jsconst  store =, new  Vuex.Store ({ 　　,,状态:{ 　　,,,数:0 　　}});才能//,组件里获取数值store.state美元。数

2, getter方法:状态作为第一个参数,其他getter作第二个参数,返回值会根据他的依赖缓存起来,相当于Vue的计算属性

//,store.jsconst  store =, new  Vuex.Store ({ 　　,,状态:{ 　　,,,数:,1, 　　,,,金额:2 　　,,}, 　　getter才能:{ 　　,,,getCountAndSum:,(状态,getter),=祝辞,{ 　　,,,,,return  state.count  +, state.sum; 　　,,,} 　　}});才能//,其他组件获取getter store.getters美元。getCountAndSum

3,突变:修改状态(同步的),状态作为第一个参数,提交载荷作为第二个参数

const  store =, new  Vuex.Store ({ 　　,,状态:{ 　　,,,数:,1, 　　,,}, 　　突变才能:{ 　　,,,increment (状态,,obj), { 　　,,,,,state.count  +=, obj.n; 　　,,,} 　　}});才能//,其他组件调用突变的方法store.commit美元(& # 39;增量# 39;,,{n:, 100});

4,行动:异步操作(执行突变的方法,不是直变更状态)

const  store =, new  Vuex.Store ({ 　　,,状态:{ 　　,,,数:,1, 　　,,}, 　　突变才能:{ 　　,,,increment (状态,,obj), { 　　,,,,,state.count  +=, obj.n; 　　,,,} 　　,,}, 　　行动才能:{ 　　,,,increment (上下文),{ 　　,,,,,context.commit(& # 39;增量# 39;); 　　,,,} 　　}});才能//,其他组件调用行动的方法store.dispatch美元(& # 39;增量# 39;);

5,模块:存储的子模块

const  a =, { 　　,,状态:{ 　　,,,数:0 　　,,}, 　　getter才能:{ 　　,,,getCount2  (getter,状态,还以为;rootState), { 　　,,,,,return  state.count  +, 2; 　　,,,} 　　,,}, 　　突变才能:{ 　　,,,increment  (getter,状态,还以为;rootState), { 　　,,,,,state.count + +,,, 　　,,,} 　　,,}, 　　行动才能:{ 　　,,,increment (上下文),{ 　　,,,,,//,context.state.count; 　　,,,,,//,context.rootState.count; 　　,,,,,context.commit(& # 39;增量# 39;); 　　,,,} 　　}};才能const  b =, {}; const  store =, new  Vuex.Store ({ 　　,,模块:{ 　　,,,,, 　　,,,,b ,}});//,其他组件调用,(获取状态的变量需要加上引入的模块的别名)store.state.a store.state美元。b

<强>三,Vuex辅助函数

& lt; template> 　　& lt;才能div 类=癮bout"比; 　　,,,& lt; h2>数:,& lt; span>{{数}}& lt;/span> & lt;/h2> 　　,,,& lt; h2> getCount:, & lt; span> {{$ store.getters.getCount}} & lt;/span> & lt;/h2> 　　,,,& lt; h2>总和:,& lt; span>{{和}}& lt;/span> & lt;/h2> 　　,,,& lt; h2> getSum:, & lt; span> {{$ store.getters.getSum}} & lt;/span> & lt;/h2> 　　,,,& lt; button  @click=癱lickB"祝辞test ,,, & lt;/button> 　　& lt;才能/div> & lt;/template> & lt; script> import  {mapGetters, mapState,还以为,mapMutations, mapActions},得到& # 39;vuex& # 39;,, 　　export  default  { 　　,,名字:& # 39;关于# 39; 　　data 才能;(),{ 　　,,,return  { 　　,,,,,数:,0, 　　,,,,,金额:0 　　,,,} 　　,,}, 　　计算才能:{ 　　,,,…mapState ({ 　　,,,,,数:,state =祝辞,state.count, 　　,,,,,countAlias:, & # 39;计数# 39; 　　,,,,,countPlusLocalState (状态),{ 　　,,,,,,,return  state.count  +, this.localCount; 　　,,,,,} 　　,,,}), 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null

Vuex中常用知识点有哪些