vuex了解

如果组件之间传递的数据比较复杂，建议使用vue的状态管理模式 vuex
Vuex 适用于 父子、隔代、兄弟组件通信
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。每一个 Vuex 应用的核心就是 store（仓库）。“store” 基本上就是一个容器，它包含着你的应用中大部分的状态 ( state )。
Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化。

Vuex 是什么
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式,Vuex 是单向数据流的一种实现。
Vuex 的完整流程
组件中触发 Action，Action 提交 Mutations，Mutations 修改 State。 组件根据 State 或 Getters 来渲染页面。具体如下图
这个状态自管理应用包含以下几个部分：
核心概念
State 用来存状态。在根实例中注册了store 后，用 this.$store.state 来访问。
Getters 从 state 上派生出来的状态。可以理解为基于 State 的计算属性。很多时候，不需要 Getters，直接用 State 即可。

Mutations 用来改变状态。需要注意的是，Mutations 里的修改状态的操作必须是同步的。在根实例中注册了 store 后， 可以用 this.$store.commit(‘xxx’, data) 来通知 Mutations 来改状态。mutations定义的方法动态修改Vuex的store中的状态或数据。

Actions 通过调用 Mutations 来改状态。Actions 可以包含异步操作。在根实例中注册了 store 后， 可以用 this.$store.dispatch(‘xxx’, data) 来存触发 Action。当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏

1、vuex 可以理解为一种开发模式或框架。比如PHP 有 thinkphp，java 有 spring 等。
2、通过状态（数据源）集中管理驱动组件的变化（好比 spring 的 IOC 容器对 bean 进行集中管理）。
3、应用级的状态集中放在 store 中； 改变状态的方式是提交 mutations，这是个同步的事物； 异步逻辑应该封装
在 action 中。
属性分别是 State、 Getter、Mutation 、Action、 Module

State
1、Vuex 就是一个仓库，仓库里面放了很多对象。其中 state 就是数据源存放地，对应于与一般Vue 对象里面
的 data。
2、state 里面存放的数据是响应式的，Vue 组件从 store 中读取数据，若是store 中的数据发生改变，依赖
这个数据的组件也会发生更新。
3、它通过mapState 把全局的 state 和 getters 映射到当前组件的 computed 计算属性中。

Getter
1、getters 可以对 State 进行计算操作，它就是Store 的计算属性
2、 虽然在组件内也可以做计算属性，但是 getters 可以在多组件之间复用
3、 如果一个状态只在一个组件内使用，是可以不用 getters

Action
1、Action 类似于 mutation，不同在于：
2、Action 提交的是 mutation，而不是直接变更状态。
3、Action 可以包含任意异步操作

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。每一个 Vuex 应用的核心就是 store（仓库）。“store” 基本上就是一个容器，它包含着你的应用中大部分的状态 ( state )。
（1）Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
（2）改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化。
主要包括以下几个模块：
State：定义了应用状态的数据结构，可以在这里设置默认的初始状态。
Getter：允许组件从 Store 中获取数据，mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性。
Mutation：是唯一更改 store 中状态的方法，且必须是同步函数。
Action：用于提交 mutation，而不是直接变更状态，可以包含任意异步操作。
Module：允许将单一的 Store 拆分为多个 store 且同时保存在单一的状态树中。

VUEX属性
State、 Getter、Mutation 、Action、 Module

vuex的State特性
A、Vuex就是一个仓库，仓库里面放了很多对象。其中state就是数据源存放地，
对应于一般Vue对象里面的data
B、state里面存放的数据是响应式的，Vue组件从store中读取数据，若是store
中的数据发生改变，依赖这个数据的组件也会发生更新
C、它通过mapState把全局的 state 和 getters 映射到当前组件的 computed
计算属性中

vuex的Getter特性
A、getters 可以对State进行计算操作，它就是Store的计算属性
B、 虽然在组件内也可以做计算属性，但是getters 可以在多组件之间复用
C、 如果一个状态只在一个组件内使用，是可以不用getters

vuex的Mutation特性
Action 类似于 mutation，不同在于：Action 提交的是 mutation，而不是直接
变更状态；Action 可以包含任意异步操作。
应用级的状态集中放在store中； 改变状态的方式是提交mutations，这是个同
步的； 异步逻辑应该封装在action中。

为什么要用vuex,vuex的使用场景
当多个状态（数据）分散在不同组件的各个角落，有大量状态（数据）需要相互
间传递，如果都放在后台，统一去后台获取，则网络开销比较大，多层嵌套组件
间就需要vuex这样的解决方案，公共数据托管在state里，不同组件都可以使用，
vuex有一个轻量型替代方案，bus.js。
常用场景：SPA中音乐播放，购物车数据，登录状态，配合localstorage使用
一般存vuex的不就是个人信息和登录状态吗
token存在本地 导航守卫判断 token在发送获取个人请求
再一次存入vuex里 状态也是
vuex+localstorage