Vue学习Day14 Vuex概念作用、多界面状态管理、Vuex安装配置、Devtools和mutations、state单一状态树

想利用暑假时间好好学习一下vue，会记录每一天的学习内容。
今天是学习vue的第14天！

起起伏伏乃人生常态，继续加油～

---

---

Vuex

1. Vuex概念和作用

Vuex是做什么的？

Vuex是一个专门为Vue.js应用程序开发的状态管理模式

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

---

状态管理是什么？

• 可以简单的将其看成是需要把多个组件共享的变量全部存储在一个对象里面
• 然后，将这个对象放在顶层的Vue实例中，让其他组件可以使用
• 那么，多个组件是不是就可以共享这个对象中的所有变量属性了呢？

---

我们不能自己封装一个对象来管理吗？

• Vue.js带给我们最大的便利是响应式
• 如果我们自己封装实现一个对象能不能保证它里面所有的属性都做到响应式呢？可能会有些麻烦
• Vuex就是为了提供这样一个在多个组件中共享状态的插件，直接用它吧

---

管理什么状态呢？

有什么状态需要我们在多个组件中共享的？

• 比如用户的登录状态、用户名称、用户头像、用户地理位置信息等
• 比如商品的收藏、购物车中的商品等
• 这些状态信息，都可以放在统一的地方，对它进行保存和管理，而且它们还是响应式的

---

2. 单界面到多界面状态管理切换

单界面的状态管理

我们知道，要在单个组件中进行状态管理是一件非常简单的事情
以下是一个表示“单向数据流”理念的简单示意图：

• State：状态
• View：视图层，可以针对State的变化，显示不同的信息
• Actions：主要是用户的各种操作：点击、输入等，会导致状态的改变

以一个简单的计数应用为例：


在这个案例中我们的counter状态是需要管理的

• counter需要某种方式被记录下来，也就是我们的State
• counter目前的值需要被显示在页面中，也就是我们的View
• 界面发生点击操作时，需要去更新状态，也就是我们的Actions

---

多界面状态管理

vue实际上已经帮我们做好了单界面的状态管理，但如果是多个界面呢？

• 多个视图都依赖于同一个状态(一个状态改了，多个界面需要进行更新)
• 不同界面的Actions都想修改同一个状态(Home.vue需要修改，Profile.vue也需要修改这个状态)

也就是说对于某些状态(状态1、状态2、状态3)来说，只属于某一个视图，但有一些状态(状态a、状态b、状态c)，属于多个视图想要共同维护的

• 状态a、状态b、状态c交给 vuex管理

全局单例模式：

• 将共享的状态抽取出来，交给vuex统一进行管理
• 之后每个视图按照规定进行访问和修改等操作

---

Vuex的安装和配置

安装Vuex

npm install vuex --save

还是跟配置vue-router类似的步骤

src文件夹下建一个store文件夹(这里一般不叫vuex)，在里面建index.js文件

在main.js中导入、挂载

store实例里放的东西是比较固定的

state里实际上就可以定义我们上面的counter

state: {
	counter: 1000
},

假如有多个页面，现在就能共享这个counter了

为了演示多界面，再新建一个HelloVuex组件
当我们在main.js中挂载了store之后，所有的组件都有$store对象(可类比router和$router)

在HelloVuex.vue中展示counter：

<template>
  <div>
      <h2>{{$store.state.counter}}</h2>
  </div>
</template>

那么在App.vue中的代码我们也要进行修改：

在App中改，HelloVuex也能响应

但是，注意我们对counter的修改方式：$store.state.counter直接对counter进行了修改。官方不建议这样来修改，而是要通过另一种方式去改。

我们先看一下Vuex的状态管理图

---

Vuex状态管理图

图上的字要仔细看看👀

Devtools是vue开发的一个浏览器插件，可以记录每次修改state的状态

• vuex中管理的状态都是多个界面共享的状态，有可能是界面1修改这个状态，也可能是界面2…
• 这样我们很难跟踪到到底是哪个界面来修改的状态，如果有错误就不好改
• 利用Devtools我们就能知道哪一步改错了，就能针对性改错
  但是如果我们绕过了mutations环节，Devtools就跟踪不到了，只有通过mutations修改，Devtools才会进行记录

⚠️：Devtools跟踪不到异步操作，所以在mutations中推荐只进行同步操作

---

3. Devtools和mutations

Devtools安装

在chrome网上应用商店可以直接下载，不能翻墙的话找找别的渠道也可

这里出现vue的时候就是安装好了

在这可以看到当前项目的结构：

切换到Vuex
这里可以看到所有的state和跟踪记录

---

mutations

这里我们就开始通过mutations修改counter了

mutations: {
    // 定义一些方法
    // state参数自动传过来的
    increment(state) {
        state.counter++
    },
    decrement(state) {
        state.counter--
    }
}

App.vue中修改state的方式也要改掉

现在已经可以成功跟踪了

---

4. Vuex核心概念

• State
• Getters
• Mutations
• Actions
• Modules

State 单一状态树

Vuex提出使用单一状态树，什么是单一状态树？

• 可以翻译成单一数据源

用一个生活中的例子做一个简单类比：

• 在国内，我们有很多信息需要被记录，比如户口信息
• 户口信息被分散在很多地方进行管理，如果有一天你要转户口，你需要去各个对应的工作点打印盖章各种资料，最后到一个地方提交证明
• 这种保存信息的方案，低效且不便于管理

这和我们在应用开发中比较类似：

• 如果我们的状态信息是保存在多个Store实例中的，那么之后的管理和维护等等都会变得特别困难
• 所以Vuex使用了单一状态树来管理应用层级的全部状态， 这就意味着每个应用将仅仅包含一个 Store 实例
• 单一状态树能够让我们以最直接的方式找到某个状态的片段，而且在之后的维护和调试过程中，也可以非常方便管理和维护

---

核心概念没学完😢，明天继续