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

Posted 2021-01-25 wangrenmeng

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  （个人感觉说的非常通俗易懂好理解）