【前端vue——系列4】vuex和angular

系列文章总结

【前端vue——系列1】vue的路由
【前端vue——系列2】vue中的data是函数而不是对象与computed的实现原理
【前端vue——系列3】vue框架的优缺点；vue实现双向绑定
【前端vue——系列4】vuex和angular
【前端vue——系列5】生命周期详讲（vue的生命周期、页面的生命周期）

---

---

一、vuex

1.1 安装

• HTML 中使用 script 标签引入
• Vue项目中使用 npm 下载安装（需要安装 Node 环境）

1.2 特点

Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store中的状态发生变化，那么相应的组件也会相应地得到高效更新。

不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

1.3 工具

• Store

每一个 Vuex 应用的核心就是 store（仓库）。“store” 基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。

• State

驱动应用的数据源，用于保存所有组件的公共数据.。

• Getter

可以将 getter 理解为 store 的计算属性, getters
的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

• Mutation

mutations 对象中保存着更改数据的回调函数,该函数名官方规定叫 type, 第一个参数是 state, 第二参数是payload,
也就是自定义的参数。mutation 必须是同步函数。mutations 对象里的方法需要使用 store.commit 调用

• Action

Action 提交的是 mutation 而不是直接变更状态。action 可以包含任意异步操作。actions 对象里的方法需要使用
store.dispatch 调用。
    Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取
state 和 getters。

• Module

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store
对象就有可能变得相当臃肿。为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的
state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割。

1.4 使用

1. 把 vuex 写在 main.js 文件里

在组件中调用

2. 把 vuex 分离出来

在 src 目录下创建一个 vuex 目录，新建 modules 目录 和 index.js 文件 放到 vuex 目录下

在 main.js 文件里引入 vuex 目录

在 index.js 里写上如下代码

在 modules 目录下 新建 city.js 文件，里面代码如下

在组件里设置值

在另一个组件里使用

1.5 vue 不建议在 action 中修改 state 而是在 mutation 中修改

• 结论Mutation中是同步函数和Action中是异步函数，属于一种约定，为了更好的追踪vuex的状态变化，希望我们都按照这种原则进行开发
• Mutation必须是同步函数
• 更改state的唯一方法是通过提交 mutation
• Action中不进行状态的直接更改，而是通过commit触发mutation
• 通过commit 提交 mutation 的方式来修改 state
  时，vue的调试工具能够记录每一次state的变化，这样方便调试。但是如果是直接修改state，则没有这个记录。

---

二、angular原理

angular里面的html问价就是view，叫做模板（template），当你的数据变化需要改变模板时，不用再到js代码里面进行改变，angula里把模板和数据绑定在了一起，数据改变时，模板自然就变化了，view变化了也会自动返应到你的数据上面，这就是双向绑定。在angular的理念里面，模板就是一副素描画，数据就是颜色，你想做完这幅画，只需要向模板填充你想要颜色就行了（也就是填充你的数据）

• angular的运行就是在JavaScript context里面自己实现了一套环境，叫做angular环境（angular context），非angular那部分环境叫经典环境（classic context）

• 在angularcontext里面也有一个队列，这个队列里面时watch列表，列表里面就是那些被盗听的变量，包括那些进行数据绑定的变量，如果用户改变了一个绑定了数据的view，这个时候就会触发一个angular函数$apply（也就是把这个event放入了event quene，然后轮训到这个时候就触发了）。

• 然后把这个改变的值更新进绑定的那个变量，再开始调用一个digest的函数，digest就是用来轮训这个watch列表，看这个列表中的指是否变动，如果有变动就变动改写相应的DOM（不用angular就要自己写这部分代码，如果你有100个变量，你就要写100个这种改动，而且如果以后有啥变动，还得自己去重构）。

---

码字不易~， 各位看官要是看爽了，可不可以三连走一波，点赞皆有好运！，不点赞也有哈哈哈~~~