前端路由的核心 状态管理

Question

vue 路由依赖：vue-router

通过组合组件来组成单页应用程序，只需要将组件映射到路由即可。前端路由的核心，就在于 —— 改变视图的同时不会向后端发出请求。

需要注意2种模式的区别：hash 模式和 history 模式，hash 模式会在后面加一个很丑的 #，可以开启 history 去掉。

hash 模式原理：它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。hash 可以理解为锚点，例如 /index.html/#/foo，hash 值为 #/foo，这样不会跳转页面。就相当于统一页面的不同锚点，页面间跳转与 /index.html/#foo 到 /index.html/#bar 类似。

./store/index.js

import Router from 'vue-router'
Vue.use(Router)
export default new Router({
  routes: [
  {
  path: '/common',
  name: 'common',
  component: Common
  }
]

路由层面还会包括嵌套路由，动态路由以及重定向，相当于自己模仿浏览器请求然后服务器响应模式，其实不涉及向后端请求，仅在浏览器就可以实现页面跳转，前段时间我做的用户权限控制就用到了 vue-router，相比 MVC 结构下的后端路由，清晰了不少，这样后端只要负责路由编写 api 就好。

状态管理

下面是我在用 vuex 做项目时的一些思考，简单修改了一下，也添加了一些关于 redux 的思考。

vuex

• state，前端 data
• view，前端 DOM
• actions，用户操作，引起 data 变化从而导致 DOM 变化。

多个组件（视图）共享状态：通俗来讲，就是多个组件间会通信时，导致从后端拿来的数据发生变化，当组件较多时，如果兄弟组件间的通信都依赖父组件进行通信，会导致组件间的耦合非常高，从而导致项目逻辑混乱，难以维护。

多个组件（视图）依赖于同一状态。
来自不同视图的行为需要变更同一状态。

全局单例模式管理，把组件的共享状态抽取出来，不管在组件树的哪个位置，任何组件都能获取状态或者触发行为！

实践出真知：

1. state 存放在 index.js 中，创建的 Store 实例 getter、mutations、actions 等，可以分离出来
2. getters 存放在 getter.js 中，数据流为 state→getter→ 组件，getter 相当于一个数据获取过滤器，从仓库拿特定数据到组件，相当于对 computed 的集中处理。
3. mutations 存放在 mutations.js 中，数据流为组件 →mutations→state，mutations 相当于一个数据提交发射器，从组件提交数据到仓库
4. actions 存放在 actions.js 中，数据流为组件 →actions→mutations→state，异步操作的主要场所。
5. modules 是开发大型应用时需要用到的，每个 module 都有单独的 states，getters，actions 以及 mutation，有一股 nodejs 模块的味道。

Vuex 三原则：

• 唯一数据源
• 保持状态只读
• 数据改变只能通过纯函数完成 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。

mutation 和 action 的区别

mutation 只变更本地的状态，也就是说，直接只去修改 store 中的数据。
action 包含异步操作，直接调用 api，通过 api 的数据，再提交 mutation。

可以说，action 只比 mutation 多了一个异步调用 api 的操作，因为调用 api 后，一般有2种返回结果，succes 或者 error，或者是 promise 的多种状态，根据不同的。

最近在学习 redux，组件 dispatch 一个 action 到 store，相当于发送一个 http 请求，然后 store 做出响应，返回一个 response 给组件。和 vuex 大致类似，唯一有区别的是，vuex 还需要引入 react-redux，引入 Provider 和 connect 连接组件和 store。