vuex

最近一直在用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我只管取,不改变

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 安装 npm npm install vuex --save 在一个模块化的打包系统中,您必须显式地通过Vue.u...
    萧玄辞阅读 2,964评论 0 7
  • Vuex是什么? Vuex 是一个专为 Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件...
    萧玄辞阅读 3,153评论 0 6
  • vuex 场景重现:一个用户在注册页面注册了手机号码,跳转到登录页面也想拿到这个手机号码,你可以通过vue的组件化...
    sunny519111阅读 8,041评论 4 111
  • Vuex 的学习记录 资料参考网址Vuex中文官网Vuex项目结构示例 -- 购物车Vuex 通俗版教程Nuxt....
    流云012阅读 1,474评论 0 7
  • Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应...
    白水螺丝阅读 4,691评论 7 61