Vuex的基础知识+安装+综合案例

Vuex是什么？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

用一句话来讲Vuex就是专门用来传值的

在vue里面我们了解过两种传值的方法

1.子父组件传值
由于Vue是单向数据流，子组件内部不能直接修改从父级传递过来的数据，子组件与子组件之间无法相互传递数据。如果我们想让两个子组件之间进行通信的话，可以借助子组件 A 向父组件传值，父组件接收子组件 A 的数据后再传给 B 组件这样的方式进行通信。
但是这样会有一个问题，就是如果子组件 A 的父组件上面还有一层爷爷组件，或者还有更多祖父类型的层级，那么是不是会很麻烦。

2.总线的概念传值

总线的好处就是无论有多少层爷爷组件，或者还有更多祖父类型的层级，都只需要往总线里面存就行
但是总线也是有坏处的 见图2

这个时候大佬就站出来大喊一声

就不能搞个东西将数据存在一个共有的数据存在一个特定的地方吗，用的时候自己去拿，这样就不需要一层层传值，在他们的一顿操作下，于是乎 Vuex 就应运而生了

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。可以想象为一个“前端数据库”（数据仓库），
让其在各个页面上实现数据的共享包括状态，并且可操作

Vuex分成五个部分：
1.State：单一状态树
2.Getters：状态获取 操作变量，相当于get方法
3.Mutations：触发同步事件 同步操作 操作变量，相当于set方法
4.Actions：提交mutation，可以包含异步操作 异步操作，相当于是Mutations升级版
5.Module：将vuex进行分模块 用于几种管理整个Vue项目组红的所有变量

接下来我们就来了解下这五个部分

安装

1. Store 单一状态树

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

共同维护的一个状态，state里面可以是很多个全局状态

state为单一状态树，在state中需要定义我们所需要管理的数组、对象、字符串等等，只有在这里定义了，在vue.js的组件中才能获取你定义的这个对象的状态。

用法

  const state = {
   
        resturantName:'飞歌餐馆'
      };

2. Mutations 触发同步事件

就相当于我们以前实体类中的set方法
处理数据的唯一途径，state的改变或赋值只能在这里

type(事件类型)： 其值为setResturantName
payload：官方给它还取了一个高大上的名字：载荷，其实就是一个保存要传递参数的容器

3. Getters 状态获取

获取数据并渲染，

getters将state中定义的值暴露在this.$store.getters对象中，我们可以通过如下代码访问

this.$store.getters.resturantName 不推荐

4. Actions 提交mutation，可以包含异步操作

数据的异步(async)操作
你提交这个事件后 隔了几秒它才触发
Action提交的是mutation，而不是直接变更状态
2.Action可以包含任意异步操作
3.Action的回调函数接收一个 context 上下文参数，注意，这个参数可不一般，它与 store 实例有着相同的方法和属性
但是他们并不