Vue + Element UI 前端篇(八):管理应用状态

这篇具有很好参考价值的文章主要介绍了Vue + Element UI 前端篇(八):管理应用状态。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

使用 Vuex 管理应用状态

1. 引入背景

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

Vue + Element UI 前端篇(八):管理应用状态,javascript,vue.js,开发语言

2. 安装依赖

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

yarn add vuex

Vue + Element UI 前端篇(八):管理应用状态,javascript,vue.js,开发语言

3. 添加配置

3.1 添加 Store

在 src 目录下,新建一个 store 目录,专门管理应用状态,在 index.js 中创建 store。

 

Vue + Element UI 前端篇(八):管理应用状态,javascript,vue.js,开发语言

index.js

Vue + Element UI 前端篇(八):管理应用状态,javascript,vue.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

Vue + Element UI 前端篇(八):管理应用状态,javascript,vue.js,开发语言

3.2 引入 Store

 在 main.js 引入 store

Vue + Element UI 前端篇(八):管理应用状态,javascript,vue.js,开发语言

4. 使用 Store

4.1 修改状态

在原先响应折叠导航栏的函数内替换原有逻辑,改为发送提交请求来改变收缩状态。

Vue + Element UI 前端篇(八):管理应用状态,javascript,vue.js,开发语言

4.2 获取状态

在原先引用 collapse 的地方改为引用 $store.state.collapse 。

Vue + Element UI 前端篇(八):管理应用状态,javascript,vue.js,开发语言

根据收缩状态绑定不同样式,就可以实现导航菜单栏根据收缩状态更新页面效果了。

MenuBar.vue

Vue + Element UI 前端篇(八):管理应用状态,javascript,vue.js,开发语言

Vue + Element UI 前端篇(八):管理应用状态,javascript,vue.js,开发语言

HeadBar.vue

Vue + Element UI 前端篇(八):管理应用状态,javascript,vue.js,开发语言

Vue + Element UI 前端篇(八):管理应用状态,javascript,vue.js,开发语言

 Main.vue

Vue + Element UI 前端篇(八):管理应用状态,javascript,vue.js,开发语言

Vue + Element UI 前端篇(八):管理应用状态,javascript,vue.js,开发语言

5. 测试效果

进入主页,点击收缩按钮,效果如下图。

Vue + Element UI 前端篇(八):管理应用状态,javascript,vue.js,开发语言

Store 模块化

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

1. 文件结构

模块化后的文件结构

Vue + Element UI 前端篇(八):管理应用状态,javascript,vue.js,开发语言

2. Store 封装

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

Vue + Element UI 前端篇(八):管理应用状态,javascript,vue.js,开发语言

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

Vue + Element UI 前端篇(八):管理应用状态,javascript,vue.js,开发语言

AppStore.js

Vue + Element UI 前端篇(八):管理应用状态,javascript,vue.js,开发语言

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

    }
}

Vue + Element UI 前端篇(八):管理应用状态,javascript,vue.js,开发语言

 3. 状态引用

在引用 store 状态的地方加上模块名称

Vue + Element UI 前端篇(八):管理应用状态,javascript,vue.js,开发语言

如果一个文件内引用过多,嫌引用路劲又长又臭,可以使用 mapState、mapGetter、mapActions 工具进行简化。

如 MenuBar.vue 中引用较多,我们用 mapState 简化对属性的引用。如下图,给状态赋予别名。

Vue + Element UI 前端篇(八):管理应用状态,javascript,vue.js,开发语言

 引用状态的地方就可以直接用上面定义的别名进行访问了。

 

Vue + Element UI 前端篇(八):管理应用状态,javascript,vue.js,开发语言

mapState、mapGetter、mapActions 工具对于文件内大量又长又臭的状态引用时非常有用,可以适当的运用。

封装收缩组件

1. 组件封装

 如下图,新建目录和文件,封装收缩组件展开导航栏组件。

Vue + Element UI 前端篇(八):管理应用状态,javascript,vue.js,开发语言

Hamburger/index.vue

Vue + Element UI 前端篇(八):管理应用状态,javascript,vue.js,开发语言

<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>

Vue + Element UI 前端篇(八):管理应用状态,javascript,vue.js,开发语言

2. 引入组件

HeadBar.vue 中引入组件

Vue + Element UI 前端篇(八):管理应用状态,javascript,vue.js,开发语言

响应函数,通过 store 修改收缩状态

Vue + Element UI 前端篇(八):管理应用状态,javascript,vue.js,开发语言

3. 测试效果

进入主页,效果如下图。

Vue + Element UI 前端篇(八):管理应用状态,javascript,vue.js,开发语言

封装面包屑组件

将面包屑从主内容中抽取出来,封装成 BreadCrumb。

Vue + Element UI 前端篇(八):管理应用状态,javascript,vue.js,开发语言

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>

Vue + Element UI 前端篇(八):管理应用状态,javascript,vue.js,开发语言

main.js 中 引入

Vue + Element UI 前端篇(八):管理应用状态,javascript,vue.js,开发语言

动态换肤

1. 功能背景

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

Vue + Element UI 前端篇(八):管理应用状态,javascript,vue.js,开发语言

2. 改进ThemePicker 

修改 ThemePicker 插件, 绑定导出函数和主题色参数。

Vue + Element UI 前端篇(八):管理应用状态,javascript,vue.js,开发语言

3. 父组件函数绑定

在父组件绑定处理函数,增加自定义同步更新逻辑。

Vue + Element UI 前端篇(八):管理应用状态,javascript,vue.js,开发语言

这里是切换主题颜色的时候,设置 store 状态,保存共享主题色,这样其他绑定主题色的组件都可以自动更新了。

Vue + Element UI 前端篇(八):管理应用状态,javascript,vue.js,开发语言

4. 添加共享状态

在 store 中定义主题色相关的状态。

Vue + Element UI 前端篇(八):管理应用状态,javascript,vue.js,开发语言

5. 共享状态引入

在要使用的组件处引入主题色状态。

Vue + Element UI 前端篇(八):管理应用状态,javascript,vue.js,开发语言

组件样式绑定主题色状态,主题色并更时,更新组件背景色样式。

Vue + Element UI 前端篇(八):管理应用状态,javascript,vue.js,开发语言

6. 测试效果

进入主页,点击动态换肤取色器,换肤效果如下。

Vue + Element UI 前端篇(八):管理应用状态,javascript,vue.js,开发语言文章来源地址https://www.toymoban.com/news/detail-701243.html

到了这里,关于Vue + Element UI 前端篇(八):管理应用状态的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【前端】Vue+Element UI案例:通用后台管理系统-面包屑、tag栏

    参考视频: VUE项目,VUE项目实战,vue后台管理系统,前端面试,前端面试项目 案例 链接 【前端】Vue+Element UI案例:通用后台管理系统-导航栏(视频p1-16) https://blog.csdn.net/karshey/article/details/127640658 【前端】Vue+Element UI案例:通用后台管理系统-Header+导航栏折叠(p17-19) http

    2024年02月09日
    浏览(20)
  • 【vue3】前端应用中使用WebSocket与服务器进行通信并管理连接状态。

    1、写一个hook函数 url 是WebSocket的服务器地址,其中 Math.random() 用于生成一个随机数,以避免缓存问题。 onConnected 、 onDisconnected 和 onError 是连接建立、断开和出错时的回调函数,你可以根据实际需求来定义它们。 onMessageDefault 是当接收到消息时的默认处理函数,在这里将接收

    2024年02月09日
    浏览(23)
  • 基于vue-cli创建后台管理系统前端页面——element-ui,axios,跨域配置,布局初步,导航栏

    1.vue-cli创建前端工程,安装element-ui,axios和配置; 2.前端跨域的配置,请求添加Jwt的设置; 3.进行初始化布局,引入新增页面的方式; 4.home页面导航栏的设置,一级目录,二级目录; 安装成功 布局初步 1.vue-cli创建前端工程,安装element-ui,axios和配置; 2.前端跨域的配置,请

    2024年02月09日
    浏览(27)
  • ​Vue + Element UI前端篇(二):Vue + Element 案例 ​

    打开 Visual Studio Code,File -- add Folder to Workspace,导入我们的项目。 安装依赖 Element 是国内饿了么公司提供的一套开源前端框架,简洁优雅,提供了 vue、react、angular 等多个版本,我们这里使用 vue 版本来搭建我们的界面。 访问:http://element-cn.eleme.io/#/zh-CN/component/installation ,官

    2024年02月09日
    浏览(17)
  • Vue + Element UI 前端篇(九):接口格式定义

    前台显示需要后台数据,我们这里先把前后端交互接口定义好,没有后台的时候,也方便用mock模拟。 接口定义遵循几个规范: 1. 接口按功能模块划分。 系统登录:登录相关接口 用户管理:用户管理相关接口 机构管理:机构管理相关接口 角色管理 : 角色管理相关接口 菜单

    2024年02月09日
    浏览(20)
  • Vue + Element UI 前端篇(七):功能组件封装

    为了避免组件代码的臃肿,这里对主要的功能部件进行封装,保证代码的模块化和简洁度。 组件结构 组件封装重构后,试图组件结构如下图所示 代码一览 Home组件被简化,包含导航、头部和主内容三个组件。 Home.vue HeadBar.vue MenuBar.vue Main.vue 国际化语言切换也被封装成为了组

    2024年02月09日
    浏览(15)
  • Vue + Element UI 前端篇(六):更换皮肤主题

    命令行主题工具 1.安装主题工具 首先安装「主题生成工具」,可以全局安装或者安装在当前项目下,推荐安装在项目里,方便别人 clone 项目时能直接安装依赖并启动。 2.安装chalk主题 安装白垩主题,可以从 npm 安装或者从 GitHub 拉取最新代码,这里从 npm 安装。 3.初始化变量

    2024年02月09日
    浏览(11)
  • Vue + Element UI 前端篇(十三):页面权限控制

    既然是后台权限管理系统,当然少不了权限控制啦,至于权限控制,前端方面当然就是对页面资源的访问和操作控制啦。 前端资源权限主要又分为两个部分,即导航菜单的查看权限和页面增删改操作按钮的操作权限。 我们的设计把页面导航菜单和页面操作按钮统一存储在菜

    2024年01月25日
    浏览(20)
  • Vue + Element UI 前端篇(一):搭建开发环境

    开发之前,请先熟悉下面的4个文档 vue.js2.0中文, 优秀的JS框架 vue-router, vue.js 配套路由 vuex,vue.js 应用状态管理库 Element,饿了么提供的UI框架 Node JS(npm) Visual Studio Code(前端IDE) 下载地址: 官网下载地址 Visual Studio Code 是一款非常优秀的开源编辑器,非常适合作为前端I

    2024年02月09日
    浏览(22)
  • Vue + Element UI 前端篇(十五):嵌套外部网页

    在有些时候,我们需要在我们的内容栏主区域显示外部网页。如查看服务端提供的SQL监控页面,接口文档页面等。 这个时候就要求我们的导航菜单能够解析嵌套网页的URL,并根据URL路由到相应的嵌套组件。接下来我们就讲解具体实现方案。 实现原理 1. 给菜单URL添加嵌套网页

    2024年02月08日
    浏览(16)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包