vuex状态管理

一时失言乱红尘 2022-12-03 08:56 261阅读 0赞

##  ##

座右铭：越努力越幸运，越运动越健康。  
热爱前端技术，热爱运动的这样一个人

### 文章目录 ###

*   *  
 *  一、vuex是什么?
 *  二、状态管理
 *  三、理解图
 *  四、什么情况下我应该使用 Vuex？
 *  五、分析vuex各个部分
 *  六、使用vuex
 *   *  在vuex中有传入数据
 *  七、vuex中辅助函数
 *   *  mapGetters
     *  mapActions
 *  总结

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

# 一、vuex是什么? #

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

# 二、状态管理 #

这个状态自管理应用包含以下几个部分：  
state：驱动应用的数据源；  
view：以声明方式将 state 映射到视图；  
actions：响应在 view 上的用户输入导致的状态变化。  
以下是一个表示“单向数据流”理念的简单示意：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70_pic_center]

# 三、理解图 #

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

# 四、什么情况下我应该使用 Vuex？ #

Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。

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

Flux 架构就像眼镜：您自会知道什么时候需要它。

# 五、分析vuex各个部分 #

**State**

Vuex 使用单一状态树——是的，用一个对象就包含了全部的应用层级状态。

**Getter**  
有时候我们需要从 store 中的 state 中派生出一些状态，例如对列表进行过滤并计数：  
Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

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

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

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

# 六、使用vuex #

import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex)
    const state = {  
      cartShop: 0,   //购物车数量
      isnavshow: true, //底部导航是否显示
      cartLists:[], //购物车数据
    };
    const getters = { 
    
    };
    const mutations = { 
      cartShop(state) { 
        state.cartShop += 1;
      },
      navshow(state) { 
        state.isnavshow = true;
      },
      navhide(state) { 
        state.isnavshow = false;
      }
    };
    const actions = { 
      cartShop({  commit }) { 
        commit('cartShop');
      },
      navshow({  commit }) { 
        commit('navshow');
      },
      navhide({  commit }) { 
        commit('navhide');
      },
    };
    
    export default new Vuex.Store({ 
      state,
      getters,
      mutations,
      actions
    })

## 在vuex中有传入数据 ##

//order订单组件
     <button @click="del(v)">-</button>
      { { v.count}}
     <button @click="add(v)">+</button>
     
      methods:{ 
        add(v){ 
          this.$store.dispatch('CARTCHANGE',{ type:'add',...v});
        },
        del(v){ 
          this.$store.dispatch('CARTCHANGE',{ type:'del',...v});
        }
      },
     //vuex处理
     //actions中
      CARTCHANGE({ commit},obj){   //添加到购物车
          if(obj.type=='add'){ 
            commit('CARTCHANGEADD',obj);
          }else { 
            commit('CARTCHANGEDEL',obj);
          }
          
    },
    //mutations中
    CARTCHANGEADD(state,data){ 
          for(var i=0;i<state.cartData.length;i++){ 
            if(state.cartData[i].product_id == data.product_id){ 
              state.cartData[i].count+=1;
              return;
            }
          }
      },
      CARTCHANGEDEL(state,data){ 
        for(var i=0;i<state.cartData.length;i++){ 
          if(state.cartData[i].product_id == data.product_id){ 
            state.cartData[i].count-=1;
            return;
          }
        }
    }

容易遇到的问题：在组件中传送数据中需要传多个参数，但是actions中只允许俩个参数 所以在传送数据可以参一个对象。

# 七、vuex中辅助函数 #

## mapGetters ##

使用情况：在同一个组件中大量使用getters的属性

//使用方法
    1.先导入
    import { mapGetters } from 'vuex'
    2.计算属性中使用（没有其他计算属性）
    computed:mapGetters(['getters定义的属性1','getters定义的属性2']),
    3.若是在组件中已有计算属性了
    computed：{ 
    ...mapGetters(['getters定义的属性1','getters定义的属性2']),
    num（）{ }，
    num2（）{ }，
    }

## mapActions ##

使用情况：在同一个组件中大量使用actions的属性

//使用方法
    1.先导入
    import { mapActions } from 'vuex'
    2.方法中使用（没有定义其他方法）
    methods:mapActions (['getters定义的属性1','getters定义的属性2']),
    3.若是在组件中已有方法了
    methods：{ 
    ...mapActions (['getters定义的属性1','getters定义的属性2']),
    num（）{ }，
    num2（）{ }，

# 总结 #

1.在state 中定义全局变量 , 在组件中使用$ store.dispatch(“action中定义的名字”) ,在actions中commit给mutation，让 mutation 是更改state  
例如:  
某组件拿到vuex的值：$ store.state.count  
更改count的值，通过$ store.dispatch（‘changeCount’）  
在action中commit 给mutation

![在这里插入图片描述][20201216114720399.png]  
![在这里插入图片描述][20201216114811968.png]

2.在vuex中传入数据  
3.辅助函数mapGetters、mapActions的使用

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/dc41af4060d94633a5563a370e81f783.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/7e7bd04d2dae4c0cba96601e2c96db47.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/4f1a663e695f4a54ac845bb575c51167.png
[20201216114720399.png]: /images/20221123/5651d51f3e3441c88b8495a9b7074b05.png
[20201216114811968.png]: /images/20221123/a5d6c794fde7403d8634a1e3267f9e35.png