VueX 学习笔记

学习目的

    了解和熟练使用 VueX，能够在实际项目中运用。

VueX介绍

    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

        所有组件的状态,简单来讲，就是 data 里的属性，如果有多个组件 需要使用同一个数据，使用 props 会显得很复杂，尤其是非父子组件 和 父组件和后代组件 之间的数据传输问题，这时候就可以用到 VueX。

        使用场景

         问题1：多个视图依赖于同一状态。

        问题2：来自不同视图的行为需要变更同一状态。

         对于问题一，传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。对于问题二，我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱，通常会导致无法维护的代码。

        因此，我们为什么不把组件的共享状态抽取出来，以一个全局单例模式管理呢？在这种模式下，我们的组件树构成了一个巨大的“视图”，不管在树的哪个位置，任何组件都能获取状态或者触发行为！

        但是 官方推荐，不要为了使用 VueX 而去使用 VueX。官方推荐：

        如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 global event bus 就足够您所需了。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。

       VueX安装

               ① npm install vuex --save-dev

               ② 新建文件

在src文件下新建index.js

                ③ 在 index.js 里

引入vueX

                ④ 在入口文件main.js 引入

main中引入

                ⑤ 试用

试用

显示成功

        VeuX 核心

                  State

                   state 访问状态对象，就是  所有组件 共享的数据。

              Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。

               不能直接改变 store 中的状态（就像 this.$store.state.XXX = XXXX）。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

                    有以下几种方式 在组件中使用 state：

                    ① 直接用 {{ }} + $store.state.XXXX

store

方式1

                    ② 通过computed的计算属性直接赋值

computed技术属性

                    ③ 通过 mapState 的对象来赋值

store

形式1： mapState的对象来赋值  

形式2： mapState的对象来赋值

                        ④ 通过 mapState 的数组来赋值（最常用）

                        当映射的计算属性的名称与 state 的子节点名称相同时，我们也可以给 mapState 传一个字符串数组。

 mapState的数组来赋值  

---

                   Getters

                    可以认为是 store 的计算属性

store的计算属性

                       使用 getter 的几种方式

                            记住   import { mapGetters } from 'vuex'

getter

---

                    Mutations（mutation 必须是同步函数）

            更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数：

                      可以认为是 store 的 methods

Mutations

使用方式

                     Mutations的回调函数接收第二个参数，一般是一个对象

第二个参数

参数的使用

                            第二个参数为对象的使用情况

第二个参数是对象

Mutation 需遵守 Vue 的响应规则：

      1.  最好提前在你的 store 中初始化好所有所需属性（上图的注册 text）

第二个参数是对象

            在组件的methods中 

                将 `this.add()` 映射为 `this.$store.commit('add')`

                 将 `this.reduce()` 映射为 `this.$store.commit('reduce')`

---

                    Actions

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

                 Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。

                    

actions

2种用法

            也可以只直接在组件中使用 this.$stroe.dispathc( ' addAction' )

            更多关于actions的异步操作的情况，可以参考官网上的例子。

---

                    Module

                由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割，便于维护。

       Module

getters

                        默认情况下，模块内部的 action、mutation 和 getter 是注册在全局命名空间的——这样使得多个模块能够对同一 mutation 或 action 作出响应。

                       如果希望你的模块具有更高的封装度和复用性，你可以通过添加 namespaced: true 的方式使其成为带命名空间的模块。当模块被注册后，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名。【模块名/函数名】

使用

                        Module更多用法请参考官网   VueX 文档