10.8mt一面
每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同：
1.Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
2.你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用
- 当一个组件需要多次派发事件时。例如购物车数量加减。
- 跨组件共享数据、跨页面共享数据。例如订单状态更新。
- 需要持久化的数据。例如登录后用户的信息。
- 当您需要开发中大型应用，适合复杂的多模块多页面的数据交互，考虑如何更好地在组件外部管理状态时。
当应用遇到多个组件共享状态时候，即：多个视图依赖于同一个状态，不同视图的行为需要变更同一状态。
使用 Vuex 需要遵守的规则：
- 应用层级的状态应该集中到单个 store 对象中。
- 提交 mutation 是更改状态的唯一方法，并且这个过程是同步的。
- 异步逻辑都应该封装到 action 里面。
办法二：在页面刷新的时候再次请求远程数据，使之动态更新vuex数据
办法三：在父页面向后台请求远程数据，并且在页面刷新前将vuex的数据先保存至sessionStorage（以防请求数据量过大页面加载时拿不到返回的数据）
vuex-persistedstate
将vuex的state存在localStorage或sessionStorage或cookie中一份
刷新页面的一瞬间，vuex数据消失，vuex会去sessionStorage中拿回数据，变相的实现了数据刷新不丢失~
使用：
1.写入：document.cookie='username=xxxx'；
2.读取：document.cookie;
1.存储：localStorage.setItem('username','alex');
2.获取：localStorage.getItem('username');
3.单独删除：localStorage.removeItem('username');
4.全部删除：localStorage.clear();
5.自动填充：一般是用在form表单，在表单提交的时候把需要填充的数据保存在localStorage，下次输入前取到对应的值进行填充即可。
http请求携带cookie必须满足下面几个条件
拿一个Http POST请求来说 http://aaa.www.com/xxxxx/list
- 浏览器端某个Cookie的domain字段等于http://aaa.www.com或者http://www.com (在同一个域内)
- 都是http或者https，或者不同的情况下Secure属性为false
- 要发送请求的路径，即上面的xxxxx跟浏览器端Cookie的path属性必须一致，或者是浏览器端Cookie的path的子目录，比如浏览器端Cookie的path为/test，那么xxxxxxx必须为/test或者/test/xxxx等子目录(如果cookie设置在http://www.com/list中，那么请求http://aaa.www.com/xxxxx/list可以携带)
Domain: cookie的域。如果设成.deepred.com，那么a.deepred.com和b.deepred.com域名下，都可以使用.deepred.com的cookie。
Path: cookie的路径。请求资源的路径一定要包含这个path才能携带cookie。一般设置成/即可。
Expires/Max-Age: cookie过期时间。默认不设置，则是Session会话，关闭页面后，该cookie立即失效。
HttpOnly: 设成true后，JS使用document.cookie则访问不到。常用于避免XSS攻击。
Secure: 标记为Secure的cookie只应通过被HTTPS协议加密过的请求发送给服务端。
Cookie携带的场景
我们假设有一个名字为sessionId的cookie，domain设置成了.demo.com。
1.在a.demo.com域名下，ajax在该域名下的所有请求，都会自动带上sessionId
ajax.get('/api/data') // 自动带上sessionId
2.在b.demo.com域名下，ajax在该域名下的所有请求，都会自动带上sessionId
ajax.post('/api2/data2') // 自动带上sessionId
3.在b.demo.com域名下，ajax请求a.demo.com的api，需要设置withCredentials才能带上sessionId
https://a.demo.com/api/data需要支持cors跨域，并且Access-Control-Allow-Origin不能设成*，要设置成https://b.demo.com，只有这样，withCredentials才有用
这个 HTTChrome 发送请求时会附带一个 Sec-Fetch-Site HTTP Header 。这个http-header会有以下值
-
cross-site
-
same-site
-
same-origin
-
none