最近一直在用vue开发项目,写来写去就是那么些方法,对于简单的项目一些常用的vue方法足以解决,但是涉及到页面状态,权限判断等一些复杂的传值,vuex是必须的。对于vuex也运用一段时间,但是总觉得少了点什么,或者停留在会用的状态,理解不了精髓,当然了估计水平还没达到。所以一直想找个时间总结一下vuex。一来深入的了解,二来也方便以后查阅。
每一个vuex应用就是一个store,也就是说 vuex==store;
store中包含的组件:state(共享状态),mutations(改变状态的方法);
======state,根据项目需求自己定义数据结构,可以放通用的状态;
- state中的状态可以在各个组件页面通过vuex访问
-- eg:this.$store.state.(属性状态) = ' ' ;
====== getter,可以理解为getter里面的函数就是vuex里面的计算属性,类似computed函数;
- 用法,如果在vuex里定义了一个getter函数example,我们可以在vue文件里的computed计算属性里引用, eg: ...mapGetters{[example]}; 可以直接取到example的值。
====== mutations,更改store中状态的唯一方法;
- vuex中的mutations类似于事件:
-- 每一个mutation 都有一个字符串事件类型(type)和一个回调函数(handler)
--- 这个回调函数handler就是实际进行更改状态的地方,并且他会接受state作为第一个参数。
---- 要唤醒一个mutation handler 需要一相应的type调用store.commit方法
eg:store.commit(' 事件名');
----- 也可以向store.commit传入第二个参数,也就是mutation的payload;
eg:store.commit({
type:"",
属性: ,
属性:
})
------ mapMutations辅助函数将组件中的methods映射为store.commit调用
eg:...mapMutations({
add: 'example'
//映射this.add()为this.$store.commit('example ')
});
====== Action ,ancion提交的是mutation,而不是直接改变状态;可以包含异步
总结:mutation只管存,你给我(dispatch)我就存;action只管中间处理,处理完我就给你,你怎么存我不管(所有改变state状态的都是mutation来操作);getter我只管取,不改变