为什么要使用Vuex?

落日映苍穹つ 2023-03-04 09:23 57阅读 0赞

### vuex ###

#### 1. 为什么要用 vuex ####

1.  使用 vue/react 等框架，需要关注点基本就是数据，因为框架解决了数据和页面更新的实现。页面和数据的关系是y=f(x)
2.  那么我们需要关注数据(model) 和 视图(组件) 之间的关系.
    
    1.  一个组件使用一个 model，一对一的关系  
        2. 一个组件使用多个 model，一对多的关系  
        3. 多个组件使用一个 model，多对一的关系  
        4. 多个组件使用多个 model，多对多的关系
    
    > 所以组件和数据之间的对应关系，随着项目的复杂，变得混乱。所以需要统一管理数据，把数据的存取集中到一个地方，所有的组件都从这个地方取数据，更新数据也集中到同一个地方。

#### 2. store state ####

1.  store 是全局唯一的数据源
2.  state 是这个数据源的某一时刻的状态(这一刻的快照)

## state的使用方法 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21vdGlsaXR5X3NjeQ_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21vdGlsaXR5X3NjeQ_size_16_color_FFFFFF_t_70 1]

*  导入mapState之后，就可以使用第二种用法：可以将store共享数据，映射为计算属性
 *  mapState(\[‘count’\])找到store里的count数据
 *  … 展开运算符，只有展开之后，才能映射成功为计算属性

--------------------

#### 3. mutation ####

*  从技术上来说，可以直接修改 state 中的数据，比如案例中的 count，但是这样并不标准也没有一个清晰的流程
 *  所以所有涉及到 state 数据的修改，**必须**要经过 mutation 的函数才能修改数据，优势就是流程清晰，所有操作有迹可查
    
    > 1.  比如使用 jquery 操作项目数据，有 3 个 button 来修改数据，用户在操作 button 改变数据后，我们不能通过数据最终的值推断出用户的操作顺序和进行了哪些操作，因为每次的操作并**没有记录可查**
    > 2.  通过 vuex 使用 mutation 来改变数据，每次改变都会触发一个 mutation 函数，所以执行哪些函数以及他们的次序都非常清楚(**每次触发的mutation函数就是记录**)。
 *  使用场景1：方便开发时定位错误，`时光回退`一步步查看每次的改变数据的操作都是否正确
    
    > 如果在某一次操作后，**页面**不符合预期，那么就可以推断是**数据**有问题，所以那就是最近的一次 mutation 函数改变数据时出的问题，此时：将最近的这次 mutation 操作回退(时光倒流)查看上一次的数据是否正确，如果正确那就可以定位出当前的数据问题出现在最后一次 muation 函数中
 *  使用场景2：线上错误收集，在用户操作出现异常时，将**异常、产生此异常前用户的操作、用户的环境信息等**上传给前端的监控系统，开发者可以通过这些数据**还原**出用户的操作场景，依次可以更加快速的定位线上bug进行修复。

## Mutation的使用方式 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21vdGlsaXR5X3NjeQ_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21vdGlsaXR5X3NjeQ_size_16_color_FFFFFF_t_70 3]

**Mutation传递参数**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21vdGlsaXR5X3NjeQ_size_16_color_FFFFFF_t_70 4]

--------------------

## action的使用方式 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21vdGlsaXR5X3NjeQ_size_16_color_FFFFFF_t_70 5]

*  异步操作都定义到actions中
    
     *  actions中要操作数据，必须通过commit触发方法来修改
     *  actions中不能直接修改store的数据，数据只能在mutations中修改
     *  异步方法必须有一个参数，context，代表当前store实例对象
        
         *  因为为了方便通过commit触发mutations方法
 *  触发action
    
     *  通过store实例中的方法dispatch来调用
     *  dispatch：分发的意思，异步的任务都是通过分发的方式调用的
     *  ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21vdGlsaXR5X3NjeQ_size_16_color_FFFFFF_t_70 6]

**触发action的时候携带参数**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21vdGlsaXR5X3NjeQ_size_16_color_FFFFFF_t_70 7]

--------------------

#### 4. action ####

1.  改变数据有两种可能方式
    
    1.  可以**直接**修改数据（我们非常明确知道如何修改state数据，知道参与修改state数据的其他计算因子）
    2.  当前我们知道要修改state数据，但是我们不知道参与修改state数据的因子（比如案例中的step值），可能仅仅知道获取这个参与因子的线索（比如调后台接口获取数据，后台接口返回的数据就是参与改变state数据的**计算因子**，获取接口数据发送参数就是 **线索**）从后台拿到数据后，再执行mutation进行同步改变state即可。如下示例
        
            new Vuex.store({ 
            	state: { 
                    userList: []
                },
                # 同步提交 改变数据，commit('改变的类型 即mutation中的某个函数', 携带的参数)
                mutations: { 
                    updateUserList(list) { 
                        this.userList = list
                    }
                },
                # 异步操作放置在action中进行
                # 习惯称为 分发(dispatch)一个动作(action)，（往往代表着不能立即拿到最终结果，动作要经过一定的处理事件）
                actions: { 
                    async getUserList({ commit}, params) { 
                        const { data: res} = await this.$http.get('url', { params})
                        # params数据是获取res数据的线索
                        # res是真正改变state中userList数据的参与数据
                        #拿到res这样的数据后，执行同步的提交 去修改数据即可
                        commit.updateUserList(res)
                    }
                }
            })
2.  vuex约定，当进行**异步**操作改变数据时，把异步操作**写在action**中，在action内部拿到参与改变state的计算因子后，执行**mutation函数同步改变state数据**
3.  执行action习惯的说法是分发(dispatch)一个动作，执行mutation习惯就是说commit做一次数据修改提交。执行mutation时从vue-devtools调试工具中看到：type表示当前提交同步改变数据的方式，payload是有效荷载

--------------------

## getter的使用方式 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21vdGlsaXR5X3NjeQ_size_16_color_FFFFFF_t_70 8]  
**第一种方式的效果图**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21vdGlsaXR5X3NjeQ_size_16_color_FFFFFF_t_70 9]  
**第二种方式的效果图**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21vdGlsaXR5X3NjeQ_size_16_color_FFFFFF_t_70 10]

--------------------

#### 5. getter ####

1.  功能上和适用场景上完全和computed计算属性相同
2.  区分在于getter适用的范围更广，项目中所有的组件都可以引用到这个数据；具体组件中定义computed计算属性仅能在这个组件中使用

## 总结：state mutation action getter 都存在有两种使用的方式，在具体使用的时候贴合自己的实际需要，找到自己需要的使用方法才是最关键的！ ##

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21vdGlsaXR5X3NjeQ_size_16_color_FFFFFF_t_70]: /images/20230208/89d37aaf867c407abde88cb87208fc8d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21vdGlsaXR5X3NjeQ_size_16_color_FFFFFF_t_70 1]: /images/20230208/78f1f992efe44e1b92dd2aeff13cd027.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21vdGlsaXR5X3NjeQ_size_16_color_FFFFFF_t_70 2]: /images/20230208/5c2e004cbe0148c191b2df9f39f578a2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21vdGlsaXR5X3NjeQ_size_16_color_FFFFFF_t_70 3]: /images/20230208/edbc1a1a50fb4a60b3f531a15a856ada.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21vdGlsaXR5X3NjeQ_size_16_color_FFFFFF_t_70 4]: /images/20230208/d3c54d1f77574f42a4d3b94b76141eac.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21vdGlsaXR5X3NjeQ_size_16_color_FFFFFF_t_70 5]: /images/20230208/bcf75dd219c24ae0a8fc52783e9809c0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21vdGlsaXR5X3NjeQ_size_16_color_FFFFFF_t_70 6]: /images/20230208/ef42e7c33ffb4d7ca98a8903883cdbd4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21vdGlsaXR5X3NjeQ_size_16_color_FFFFFF_t_70 7]: /images/20230208/a12a0e3a2e174ef48cd2572e537d1c50.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21vdGlsaXR5X3NjeQ_size_16_color_FFFFFF_t_70 8]: /images/20230208/5066bd5400ad4215bf4c1f259d4f0aa5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21vdGlsaXR5X3NjeQ_size_16_color_FFFFFF_t_70 9]: /images/20230208/f05469b52c434ea9aa5dc653ee5a8010.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21vdGlsaXR5X3NjeQ_size_16_color_FFFFFF_t_70 10]: /images/20230208/df017492a17e410288d2f60fcd20d26c.png