Vuex的介绍和使用

Vuex的介绍和使用

本文按照Vuex官网参考编写，写的是自己对其的理解，当然官网已经写的很好了，只是有些东西还是不太好理解，希望用自己的话解释一遍

Vue的单向数据流

单向数据流：在每个Vue的实例里，(数据源) State => (数据源更新触发视图更新) view => (用户操作视图) Actions => (操作行为改变对应数据源) State

什么是Vuex

由于Vue的单项数据流在处理实例之间的通信比较复杂，比如多个组件依赖同一状态时，当某一个组件状态改变时关联的多个组件对应状态应该一起改变，即使可以通过状态提升带父级组件，也会因为层层嵌套难以管理，导致不便于维护。因此需要一个专门为Vue设计的一个单例状态管理模式
这个模式就是Vuex，它采用集中式管理所有组件的状态，解决了上述问题

Vuex的简单版

对于上面说的问题，Vuex是可以完成，但是需要在编写代码的时候为了考虑各种问题，会将项目复杂化，因此我们需要考虑项目是否真的需要Vuex进行管理，因为它实在做了很多事情

如果不需要，那我们实现一个简易版的Vuex
其实原理就是共享数据源，绑定在需要共享的组件上，如果需要记录行为方便调试，可以尝试抽离出其行为即Actions，封装成一个对象，行为即方法

现在真正聊 Vuex

Vuex真的很简单：几个核心概念

• State 数据源
• Getters 数据源的派生状态
• Mutations 突变
• Actions 行为
• Modules 模块

你可以这么理解它们

1. 作为一个状态管理模式，肯定需要状态，那就是State 数据源

2. 虽然可以从数据源获取到数据，但是如果即要保留源数据，有需要处理之后的数据，Getters就可以满足需求，比如列表排序（各种排序方式）、当前页面列表检索（数据过滤）

3. 要更新数据源必须要相应的操作，这些操作叫 Mutations 突变，它被希望异步更新state，这样无法追踪行为

4. 但是有的时候需要异步的更新数据源，但是又不希望将这种更新耦合在Vue组件中，于是出现了中间更新层Actions，它的存在就是为了解决异步的触发Mutations，并且要注意每个Action返回的值最后都会给store.dispatch，如果actions返回的是Promise，那么可以像组合Promise一样组合Action

5. 最后一个概念看文档可能比较蒙：Module
   其实从这个单词就差不多可以理解它为，将state数据源“分块”，就像前端路由一样，不希望所以路由都在一个根路由下，而是多级路由。

   Vuex同样是这样，一个应用可能有多种状态，比如一个项目有全局配置状态管理、用户登录状态管理、页面数据缓存管理，就需要分割开各种状态，并且拥有自己的行为

   vuex = {
       state: {},
       getters: {}
       mutations: {},
       actions: {},
       modules: {
           config: {
               state: {},
               getters: {}
               mutations: {},
               actions: {},
           },
           user: {
               state: {},
               getters: {}
               mutations: {},
               actions: {},
           },
           data: {
               state: {},
               getters: {}
               mutations: {},
               actions: {},
           }
       }
   }
   

   至于namespace只是为了方便，给Vuex的一个选择的余地，如果真的在开发中，为了可维护性，最好加上namespace: true

Vuex的进阶

列举一下常用的

1. map+…

只是为了方便在组件中对vuex的获取方便，多看几遍用一用就回了（如果你对ES6语法熟悉，看一下就好）

2. 表单处理

存在一些情况，v-model绑定的属性是vuex的state的，那么在计算属性中，可以使用计算属性的get和set解决这一问题