Vuex 学习

安装指令 ： npm install vuex --save

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

Vuex 文档：https://vuex.vuejs.org/zh/

一、Vuex 是做什么的？

1. 官方解释：

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

2. 通俗解释：

   把需要多个组件共享的变量全部存储在一个对象里面。然后，将这个对象放在顶层的Vue实例中，让其他组件可以使用。为了保证属性做到响应式，所以 Vue.js 就给我们提供了一个插件 Vuex (在多个组件间共享状态的插件)，用来存放那些变量

3. 管理什么状态呢？有什么状态时需要我们在多个组件间共享的呢？

   如果你做过大型开放，你一定遇到过多个状态，在多个界面间的共享问题。

   比如用户的登录状态、用户名称、头像、地理位置信息等等。

   比如商品的收藏、购物车中的物品等等。

   这些状态信息，我们都可以放在统一的地方，对它进行保存和管理，而且它们还是响应式的

4. Vuex 状态管理图例

   

二、Vuex的基本使用 （使用cli2）

基本流程：

创建一个 store 文件夹 —> index.js —> 导入Vuex —> 使用 Vuex 插件 —> 创建 Vuex.Store 实例对象 store —> export default store 导出 store —> 挂载到 Vue 实例中 —> 其他组件通过：

this.$store

获取 store 对象 —> 通过：

this.$store.state.属性

的方式来访问状态 —> 通过

this.$store.commit('mutation中方法')

来修改状态

三、Vuex 核心概念

1. state (单一状态树 存放数据)

   

2. Getters (处理数据) ，类似于计算属性

   1. 从store中获取一些state变异后的状态

      

   2. Getters作为参数和传递参数

      getters默认是不能传递参数的, 如果希望传递参数, 那么只能让getters本身返回另一个函数.

      

3. mutations （修改数据，里面必须是同步函数）

   更改 Vuex 的 store 中的状态的唯一方法是提交 mutation

   1. mutation 是什么？

      mutation 主要包括俩个部分：

      1. 字符串的事件类型（type）
      2. 一个回调函数（handler）,该回调函数的第一个参数就是state

         

   2. mutation 传递参数
      1. 在通过mutation更新数据的时候, 有可能我们希望携带一些额外的参数
      2. 参数被称为是mutation的载荷(Payload)

         

      3. 如果参数有很多，不是一个，这个时候我们以对象的形式传递，也就是payload是一个对象

         

   3. mutation的提交风格

      

   4. mutation 响应规则

      1. 什么是响应式？

         当我们数据发生变化时，界面跟着一起刷新

      2. Vuex的store中的state是响应式的, 当state中的数据发生改变时, Vue组件会自动更新
      3. 这就要求我们必须遵守一些Vuex对应的规则 什么规则呢？
         1. 提前在store中初始化好所需的属性
         2. 当给state中的对象添加新属性时, 使用下面的方式：
            1. 方式一: 使用Vue.set(obj, ‘newProp’, 123)
            2. 方式二: 用新对象给旧对象重新赋值

   5. 使用常量替代Mutation事件的类型

      怎么做呢？

      1. 我们可以创建一个文件: mutation-types.js, 并且在其中定义我们的常量.
      2. 定义常量时, 我们可以使用ES2015中的风格, 使用一个常量来作为函数的名称

         

   6. Mutation同步函数
      1. 通常情况下, Vuex要求我们Mutation中的方法必须是同步方法
      2. 主要的原因是当我们使用devtools时, 可以devtools可以帮助我们捕捉mutation的快照
      3. 但是如果是异步操作, 那么devtools将不能很好的追踪这个操作什么时候会被完成
      4. So, 通常情况下, 不要再mutation中进行异步的操作

4. Actions （接收异步数据）

   1. 在Vuex中 执行一些异步操作 如网络请求，定时器
   2. Action类似于Mutation, 但是是用来代替Mutation进行异步操作的
   3. Action 类似于 mutation，不同在于 ：
      1. Action 提交的是 mutation，而不是直接变更状态
      2. Action 可以包含任意异步操作
   4. Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用

      context.commit

      提交一个 mutation，或者通过

      context.state

      和

      context.getters

      来获取 state 和 getters
   5. Action 在组件中分发
      1. 你在组件中使用

         this.$store.dispatch('xxx')

         分发 action

         

      2. 同样的, 也是支持传递payload
      3. 过程图

         

      4. Action 返回的 promise (常用于异步操作)
         1. 在Action中, 我们可以将异步操作放在一个Promise中, 并且在成功或者失败后, 调用对应的resolve（then）或reject （catch）
         2. 代码

            

5. Modules

   1. Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割
   2. 全局结构图

      

      3. 模块的局部图

      

四、Vuex 项目结构