vuex , 简单入(liao)门(jie)

vuex什么 ? 

官方的说法就是 vuex是专门为vue.js应用程序开发的 状态管理模式 。并采用集中式存储 , 管理应用的所有组件的状态 ,并以相同的规则保证状态以一种可预估的方式发生变化。

自己理解的就是 vue提供的  前端数据管理仓库 。

vuex中有五大核心概念 :

1. state    

就是为了存储数据而存在的。包括全局所有的状态  (或者叫做数据源)

2.getter   (可以认为是 store的计算属性)   /* 补充:计算属性: 作用就是监听数据的变化 (个人理解), 每当state中的数据发生变化的时候都会重新求取计算属性 ,触发更新相关联的dom节点 */

与计算属性相似 , getter 的返回值会根据自身的依赖被缓存起来 , 只有当他的依赖发生变化时才会被重新计算

getter 被暴露后可以通过 store.getters 进行访问 (在组件中可以通过 this.$store.getters)

参数方面 : getter允许state作为第一个参数,也可以接受其他getter作为第二个参数

3.mutation    

/* mutation是改变数据状态state的唯一方法 ,但是要注意的是mutation只支持同步方法 而不支持异步方法 */

关于mutation个人感觉官方文档说的很清楚 :  (地址:https://vuex.vuejs.org/zh-cn/mutations.html)

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件:每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数

你不能直接调用一个 mutation handler。这个选项更像是事件注册:“当触发一个类型为 increment 的 mutation 时,调用此函数。”要唤醒一个 mutation handler,你需要以相应的 type 调用 store.commit 方法

代码:store.commit('increment')

在组件中可以通过使用 this.$store.commit('xxx') 提交 mutation,或者使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用(需要在根节点注入 store)。

4.action

action类似于mutation  不同在于 :

1.action提交的是mutation (上面有说到 mutation是改变state的唯一方法), 而不是直接变更state(数据状态)

2.action可以包含任意的一部操作

Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象,因此你可以调用 context.commit 提交一个 mutation,或者通过 context.state 和 context.getters 来获取 state 和 getters。

action通过store.dispatch 方法来触发  代码如下:(括号中是要触发的action方法)

store.dispatch('increment')   

  分发action

  在组件中分发action;

  在组件中使用 this.$store.dispatch('xxx') 分发 action,或者使用 mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用(需要先在根节点注入 store

 5.module

module是为了解决 当所有状态都聚集到一个大对象中时 , store对象会变得臃肿问题 而存在的。

vuex

推荐文章:https://zhuanlan.zhihu.com/p/24357762  (个人感觉说的非常通俗易懂好理解)

原文地址:https://www.cnblogs.com/wangrenmeng/p/8995799.html