谈谈对vuex的理解

谈谈对vuex的理解

首先我们要知道：

1、vuex是什么？

vuex是一个专为vue.js应用程序开发的状态管理模式（它采用集中式存贮管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化）。

2、vuex五大核心属性？

• state：存储数据，存储状态；在根实例中注册了store 后，在组件中是用 this.$store.state.变量名 来访问存放在vuex里面德数据；对应vue里面的data；存放数据方式为响应式，vue组件从store中读取数据，如数据发生变化，组件也会对应的更新。
• getter：可以认为是 store 的计算属性，它的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。（在组件中使用：this.$store.getters.变量名）
• mutation：更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。在组件中使用：this.$store.commit()
• action：包含任意异步操作，通过提交 mutation 间接更变状态。在组件中使用：this.$store.dispatch()
• module：将 store 分割成模块，每个模块都具有state、mutation、action、getter、甚至是嵌套子模块。

 对于vuex的数据传递流程，如下图所示：

什么情况下需要使用vuex？

如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。

项目结构

Vuex 并不限制你的代码结构。但是，它规定了一些需要遵守的规则：

1. 应用层级的状态应该集中到单个 store 对象中。

2. 提交 mutation 是更改状态的唯一方法，并且这个过程是同步的。

3. 异步逻辑都应该封装到 action 里面。

注： 只要遵守以上规则，如何组织代码随便。如果你的 store 文件太大，只需将 action、mutation 和 getter 分割到单独的文件。