Vuex笔记

Vuex是什么呢？

官方解释

通俗的说法呢就是：

       是一种设计思想，是把所有组件所有状态统一放在一个state空间管理，state里面的数据方便渲染到组件，当组件的数据发生变化时，通过dispatch一个action，然后action会做一些异步操作，与后端的一些交互，之后commit一个mutation（唯一一个修改state的途径），这样就是实现一个state状态修改可以预测，state修改又会映射到组件上，形成一个闭环。

官网流程解释图

---

何时使用Vuex合理呢？

       在一些简单的单页面应用时，没必要使用Vuex，这样反而更复杂。在复杂的中大型应用中：

       1、多个组件之间的数据共享

       2、传递的数据比较复杂时

---

如何使用呢？

      一般的文件设置，在src文件下设置几个js文件，并配置Vuex插件（npm install vuex --save）

文件目录

在vuex文件夹里：

     index.js是入口文件（main.js中引入）

     state.js是状态

     mutation.js是mutation方法

     mutation-type.js是存储一些mutation相关的字符串常量

     actions.js异步操作或者是mutation做一些封装

     getters.js会对一些state做一些映射

每个文件具体实现：

state文件

matution-types文件定义常量

mutation文件就可以拿到matution-types中的常量

getters文件做数据映射

action文件

     >使用场景

            1、异步操作

            2、mutation封装

                  在某个动作触发时需要操作多个mutation时，将多个mutation进行封装

action文件

index文件

store初始化，注入到项目中

store初始化，注入到项目中

---

真实需求时（举例）：

    》在需要使用的组件中引入Vuex的语法糖（写）

然后在method最后编写：

再使用到方法中：

》在使用的组件中引入Vuex的语法糖（用）

然后在方法中使用this.singer使用数据即可

》使用action.js文件后，可以在使用的组件中引入Vuex的语法糖

a

---

一般的操作顺序：

     1、先修改state.js文件，一般都是底层数据

     2、再修改getters.js文件，完成底层数据的映射到组件，里面都是函数，计算属性，也可以有很复杂的判断逻辑

    3、再有了数据之后，就需要对数据进行修改，需要mutation.js文件，定义一些修改数据的逻辑

    4、mutation-type.js，定义成字符串常量，一般以 动词-状态

    5、当页面一个操作需要操作多个mutation方法时，使用action.js文件

》mapActions中的方法调用之后就会使得mutation中的值改变，就会使映射改变，就可以使得mapGetters中的值改变，就实现页面的值改变