Vue + Element UI（八）：管理应用状态

秒速五厘米 2022-09-11 05:27 243阅读 0赞

### 文章目录 ###

*   *  一、使用 Vuex 管理应用状态
     *   *  1、引入背景
         *  2、安装依赖
         *  3、添加配置
         *  4、使用 Store
         *  5、测试效果
     *  二、Store 模块化
     *   *  1、文件结构
         *  2、Store 封装
         *  3、状态引用
     *  三、封装收缩组件
     *   *  1、组件封装
         *  2、引入组件
         *  3、测试效果
     *  四、封装面包屑组件
     *  五、动态换肤
     *   *  1、功能背景
         *  2、改进ThemePicker
         *  3、父组件函数绑定
         *  4、添加共享状态
         *  5、共享状态引入
         *  6、测试效果

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

## 一、使用 Vuex 管理应用状态 ##

### 1、引入背景 ###

像先前我们是有导航菜单栏收缩和展开功能的，但是因为组件封装的原因，隐藏按钮在头部组件，而导航菜单在导航菜单组件，这样就涉及到了组件收缩状态的共享问题。收缩展开按钮触发收缩状态的修改，导航菜单需要根据收缩状态来设置导航栏的宽度。这样就需要在收缩状态变更时刷新导航菜单样式。后续类似的组件状态共享还会有许多。为了解决组件间状态的共享，增加组件交互的易用性，我们引入 vuex 专门管理应用状态。  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA57uP55CG77yM5aSp5Y-w6aOO5aW95aSn_size_10_color_FFFFFF_t_70_g_se_x_16]

### 2、安装依赖 ###

执行以下命令，安装 vuex 依赖。

yarn add vuex

### 3、添加配置 ###

（1）添加 Store

在 src 目录下，新建一个 store 目录，专门管理应用状态，在 index.js 中创建 store。  
![在这里插入图片描述][849eed0694ab41d1988c92de97b5d5f3.png]  
**index.js**

import Vue from 'vue'
    import vuex from 'vuex'
    
    Vue.use(vuex);
    
    const store = new vuex.Store({ 
        state:{ 
            collapse:false  // 导航栏收缩状态
        },
        mutations:{ 
            collapse(state){   // 改变收缩状态
                state.collapse = !state.collapse;
            }
        }
    })
    
    export default store

（2）引入 Store

在 main.js 引入 store  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA57uP55CG77yM5aSp5Y-w6aOO5aW95aSn_size_10_color_FFFFFF_t_70_g_se_x_16 1]

### 4、使用 Store ###

（1）修改状态

在原先响应折叠导航栏的函数内替换原有逻辑，改为发送提交请求来改变收缩状态。  
![在这里插入图片描述][6708cc1245634a0492e939028e236766.png]  
（2）获取状态

在原先引用 collapse 的地方改为引用`$store.state.collapse`。  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA57uP55CG77yM5aSp5Y-w6aOO5aW95aSn_size_13_color_FFFFFF_t_70_g_se_x_16]  
根据收缩状态绑定不同样式，就可以实现导航菜单栏根据收缩状态更新页面效果了。

**MenuBar.vue**  
![在这里插入图片描述][3737d50621d341a287b8e9e76b37f7ad.png]  
![在这里插入图片描述][c20ea2fbd7234149b31e343bfdc67c9f.png]  
**HeadBar.vue**  
![在这里插入图片描述][ebab4f8f92874706a635c6f3e17819e9.png]  
![在这里插入图片描述][14408559e94a4743b6109471eddfa40d.png]  
**Main.vue**  
![在这里插入图片描述][4e0cf7ee690e4f6498072e4c05daf14e.png]  
![在这里插入图片描述][e853186a23c6411ab3133920c885c0bb.png]

### 5、测试效果 ###

进入主页，点击收缩按钮，效果如下图。  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA57uP55CG77yM5aSp5Y-w6aOO5aW95aSn_size_16_color_FFFFFF_t_70_g_se_x_16]

## 二、Store 模块化 ##

现在我们的状态都维护在index.js，状态一多就会出现臃肿，这里可以根据需求进行模块化。

### 1、文件结构 ###

模块化后的文件结构  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA57uP55CG77yM5aSp5Y-w6aOO5aW95aSn_size_7_color_FFFFFF_t_70_g_se_x_16]

### 2、Store 封装 ###

改写index.js，引入模块化，这里把之前的状态抽取到AppStore，后续可能还会有UserStore、MenuStore之类的。

import Vue from 'vue'
    import vuex from 'vuex'
    
    Vue.use(vuex);
    
    import AppStore from './modules/AppStore.js';
    
    const store = new vuex.Store({ 
        modules: { 
            app: AppStore   
            // 其他
        }
    })
    
    export default store

**AppStore.js**

export default { 
        state: { 
            appName: "I like Kitty",  // 应用名称
            collapse:false  // 导航栏收缩状态
        },
        getters: { 
            collapse(state){ // 对应着上面state
                return collapse;
            }
        },
        mutations: { 
            collapse(state){   // 改变收缩状态
                state.collapse = !state.collapse;
            }
        },
        actions: { 
    
        }
    }

### 3、状态引用 ###

在引用 store 状态的地方加上模块名称  
![在这里插入图片描述][d462e97942ca451d9e7cd64f943351c5.png]  
如果一个文件内引用过多，嫌引用路劲又长又臭，可以使用 mapState、mapGetter、mapActions 工具进行简化。

如 MenuBar.vue 中引用较多，我们用 mapState 简化对属性的引用。如下图，给状态赋予别名。  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA57uP55CG77yM5aSp5Y-w6aOO5aW95aSn_size_10_color_FFFFFF_t_70_g_se_x_16 2]  
引用状态的地方就可以直接用上面定义的别名进行访问了。  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA57uP55CG77yM5aSp5Y-w6aOO5aW95aSn_size_16_color_FFFFFF_t_70_g_se_x_16 1]  
mapState、mapGetter、mapActions 工具对于文件内大量又长又臭的状态引用时非常有用，可以适当的运用。

## 三、封装收缩组件 ##

### 1、组件封装 ###

如下图，新建目录和文件，封装收缩组件展开导航栏组件。  
![在这里插入图片描述][7afd6ac343db44e78377481c7df3dc5a.png]  
**Hamburger/index.vue**

<template>
      <svg t="1492500959545" @click="toggleClick" class="hamburger" :class="{'is-active':isActive}" style="" viewBox="0 0 1024 1024"
        version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1691" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64">
        <path d="M966.8023 568.849776 57.196677 568.849776c-31.397081 0-56.850799-25.452695-56.850799-56.850799l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 543.397081 998.200404 568.849776 966.8023 568.849776z"
          p-id="1692"></path>
        <path d="M966.8023 881.527125 57.196677 881.527125c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 856.07443 998.200404 881.527125 966.8023 881.527125z"
          p-id="1693"></path>
        <path d="M966.8023 256.17345 57.196677 256.17345c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.850799 56.850799-56.850799l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.850799l0 0C1023.653099 230.720755 998.200404 256.17345 966.8023 256.17345z"
          p-id="1694"></path>
      </svg>
    </template>
    
    <script>
    export default { 
      name: 'hamburger',
      props: { 
        isActive: { 
          type: Boolean,
          default: false
        },
        toggleClick: { 
          type: Function,
          default: null
        }
      }
    }
    </script>
    
    <style scoped>
    .hamburger { 
      display: inline-block;
      cursor: pointer;
      width: 20px;
      height: 20px;
      transform: rotate(90deg);
      transition: .38s;
      transform-origin: 50% 50%;
    }
    .hamburger.is-active { 
      transform: rotate(0deg);
    }
    </style>

### 2、引入组件 ###

HeadBar.vue 中引入组件  
![在这里插入图片描述][b88d0c85adae4f0c9fbe9a4349a429a4.png]  
响应函数，通过 store 修改收缩状态  
![在这里插入图片描述][f7a65690110041559f952cbe6557da38.png]

### 3、测试效果 ###

进入主页，效果如下图。  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA57uP55CG77yM5aSp5Y-w6aOO5aW95aSn_size_16_color_FFFFFF_t_70_g_se_x_16 2]

## 四、封装面包屑组件 ##

将面包屑从主内容中抽取出来，封装成 BreadCrumb。  
![在这里插入图片描述][32054315b8b74bd8b89094d143eaaa93.png]  
**BreadCrumb/index.vue**

<template>
      <el-breadcrumb separator="/" class="breadcrumb">
        <el-breadcrumb-item v-for="item in $route.matched" :key="item.path">
          <a href="www.baidu.com">{ {  item.name }}</a>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </template>
    
    <script>
    export default { 
      data() { 
        return { 
        };
      },
      methods: { 
    
      },
      mounted() { 
    
      }
    };
    </script>
    
    <style scoped lang="scss">
    .breadcrumb { 
      padding: 10px;  
      border-color: rgba(38, 86, 114, 0.2);
      border-bottom-width: 1px;
      border-bottom-style: solid;
      // background: rgba(180, 189, 196, 0.1);
    }
    </style>

main.js 中 引入  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA57uP55CG77yM5aSp5Y-w6aOO5aW95aSn_size_11_color_FFFFFF_t_70_g_se_x_16]

## 五、动态换肤 ##

### 1、功能背景 ###

之前的动态换肤，只能刷新 Element 相关组件的颜色，而如果我们希望在换肤的时候我们的头部区域也同步改变就需要做进一步的修改了。接下来，我们就实现这个功能，赋予换肤组件在更新 Element 组件颜色的时候，可以定制插入一些自定义的操作。  
![在这里插入图片描述][666dfb0de7b64dacb83b10ed6c950cd3.png]

### 2、改进ThemePicker ###

修改 ThemePicker 插件， 绑定导出函数和主题色参数。  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA57uP55CG77yM5aSp5Y-w6aOO5aW95aSn_size_14_color_FFFFFF_t_70_g_se_x_16]

### 3、父组件函数绑定 ###

在父组件绑定处理函数，增加自定义同步更新逻辑。  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA57uP55CG77yM5aSp5Y-w6aOO5aW95aSn_size_15_color_FFFFFF_t_70_g_se_x_16]  
这里是切换主题颜色的时候，设置 store 状态，保存共享主题色，这样其他绑定主题色的组件都可以自动更新了。  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA57uP55CG77yM5aSp5Y-w6aOO5aW95aSn_size_12_color_FFFFFF_t_70_g_se_x_16]

### 4、添加共享状态 ###

在 store 中定义主题色相关的状态。  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA57uP55CG77yM5aSp5Y-w6aOO5aW95aSn_size_13_color_FFFFFF_t_70_g_se_x_16 1]

### 5、共享状态引入 ###

在要使用的组件处引入主题色状态。  
![在这里插入图片描述][b58b416caeb74d37974a7615d8ab876e.png]  
组件样式绑定主题色状态，主题色并更时，更新组件背景色样式。  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA57uP55CG77yM5aSp5Y-w6aOO5aW95aSn_size_17_color_FFFFFF_t_70_g_se_x_16]

### 6、测试效果 ###

进入主页，点击动态换肤取色器，换肤效果如下。  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA57uP55CG77yM5aSp5Y-w6aOO5aW95aSn_size_17_color_FFFFFF_t_70_g_se_x_16 1]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA57uP55CG77yM5aSp5Y-w6aOO5aW95aSn_size_17_color_FFFFFF_t_70_g_se_x_16 2]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA57uP55CG77yM5aSp5Y-w6aOO5aW95aSn_size_10_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/982bca76162240beb4605eefd51abcb7.png
[849eed0694ab41d1988c92de97b5d5f3.png]: /images/20220828/43d4dc012b81489abcc0e36d5bf398af.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA57uP55CG77yM5aSp5Y-w6aOO5aW95aSn_size_10_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/ad4aae2a11db416faa7d84435f6a213a.png
[6708cc1245634a0492e939028e236766.png]: /images/20220828/cd7aca36b66c4dbdadb2adf3f813d375.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA57uP55CG77yM5aSp5Y-w6aOO5aW95aSn_size_13_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/de21ad45eb77465f98cc36857ee937c8.png
[3737d50621d341a287b8e9e76b37f7ad.png]: /images/20220828/eb15062bcb5d429088117dd0dced2f3d.png
[c20ea2fbd7234149b31e343bfdc67c9f.png]: /images/20220828/978a1c0eee1345789754eca17c978ca5.png
[ebab4f8f92874706a635c6f3e17819e9.png]: /images/20220828/191cb28697a84f708886ff9d412523a9.png
[14408559e94a4743b6109471eddfa40d.png]: /images/20220828/eec60168cbd74243878dec1f59e06903.png
[4e0cf7ee690e4f6498072e4c05daf14e.png]: /images/20220828/3c39e5ec40114a579927ce4ca7921cce.png
[e853186a23c6411ab3133920c885c0bb.png]: /images/20220828/59c8d0fdb1284fd0b1270b51d87bc72f.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA57uP55CG77yM5aSp5Y-w6aOO5aW95aSn_size_16_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/f83ab8ad60344063a20800d816de9136.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA57uP55CG77yM5aSp5Y-w6aOO5aW95aSn_size_7_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/533eccd864e042dcad44b5f421c370d7.png
[d462e97942ca451d9e7cd64f943351c5.png]: /images/20220828/745a67caff0f4501ab35258b78eb2b3a.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA57uP55CG77yM5aSp5Y-w6aOO5aW95aSn_size_10_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220828/a13b6db3ad854b6eac59ace2187e9b26.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA57uP55CG77yM5aSp5Y-w6aOO5aW95aSn_size_16_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/539fff79209043d2a062f41e37fa1e59.png
[7afd6ac343db44e78377481c7df3dc5a.png]: /images/20220828/aedd4eead1794f43bbb70b970f397d44.png
[b88d0c85adae4f0c9fbe9a4349a429a4.png]: /images/20220828/5cee193af63649aa9948394e100f3e9d.png
[f7a65690110041559f952cbe6557da38.png]: /images/20220828/0a90c5f0a968495b9e7b8ae991ec96bc.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA57uP55CG77yM5aSp5Y-w6aOO5aW95aSn_size_16_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220828/170f202c75a64370ba6bef9dad9262f0.png
[32054315b8b74bd8b89094d143eaaa93.png]: /images/20220828/6b72b04baa2e4d7999e2d9e79e62f45c.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA57uP55CG77yM5aSp5Y-w6aOO5aW95aSn_size_11_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/93197617f97f49a7aff62487b1954a5d.png
[666dfb0de7b64dacb83b10ed6c950cd3.png]: /images/20220828/b61ed69592fb4dd1b19a4495e73962db.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA57uP55CG77yM5aSp5Y-w6aOO5aW95aSn_size_14_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/bdb86586420845a8b2c94565d8c9cd94.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA57uP55CG77yM5aSp5Y-w6aOO5aW95aSn_size_15_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/ee99fbd818a841538ecd4c771cf75e79.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA57uP55CG77yM5aSp5Y-w6aOO5aW95aSn_size_12_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/e7fdf431530d48b3b0092a50d28ebcca.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA57uP55CG77yM5aSp5Y-w6aOO5aW95aSn_size_13_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/87e492a3c8294cddb9a1e5d9cb2254f9.png
[b58b416caeb74d37974a7615d8ab876e.png]: /images/20220828/5f868c43a67a4654a80ae5bba37df3fd.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA57uP55CG77yM5aSp5Y-w6aOO5aW95aSn_size_17_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/155b068beba3421e90722fd30bb8b483.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA57uP55CG77yM5aSp5Y-w6aOO5aW95aSn_size_17_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/1b0174a1fa6a491eb6d99a0776d64d94.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA57uP55CG77yM5aSp5Y-w6aOO5aW95aSn_size_17_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220828/ef62125040344cc2b133677b86ffe3fc.png