最新要闻

广告

手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

 警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

家电

  1. 首页
  2. 移动通信
  3. 内容

使用vue2+element-ui+vuex实现后台管理系统的头部背景色动态点击修改

来源：博客园


(资料图)

**以下内容仅供自己学习使用

话不多说，直接上代码

  1. 首先去vuex里面
import Vue from "vue";import Vuex from "vuex";Vue.use(Vuex);const store = new Vuex.Store({  state: {    headerColor: "default-header",   //定义一个默认的颜色  },  mutations: {  //setHeaderColor 方法可以用来修改 headerColor 的值。当调用 setHeaderColor 方法时，//它会更新 store 中的 headerColor 值，并且将其保存在浏览器的 localStorage 中，以便在刷新页面后仍然能够使用该值。    setHeaderColor (state, color) {      state.headerColor = color      localStorage.setItem("headerColor", color)    },  },  actions: {  //调用了 setHeaderColor 方法，并通过 context.commit 方法提交了一个 mutation，从而修改了 headerColor 的值。    updateHeaderColor (context, color) {      context.commit("setHeaderColor", color);    }  }});//使用 subscribe 方法在 store 中添加了一个监听函数。每当 store 中的 mutation 被提交时，//这个监听函数会自动将 headerColor 的值更新到 localStorage 中。这样做可以确保即使用户刷新页面，头部颜色的设置也不会丢失store.subscribe((mutation, state) => {  localStorage.setItem("headerColor", state.headerColor)})export default store;
  1. 来到颜色点击切换页面，先上效果图，后上代码(建议复制到编辑器当中去看)

效果图

<script>import { mapActions, mapState } from "vuex"export default {  name: "AdminBeautification",  computed: {    ...mapState(["headerColor"])  },  methods: {    ...mapActions(["updateHeaderColor"])  }};</script>
  1. 最后来到home组件调用

使用

切记不用再在data里面定义headerColor，不然会报错的！

created () {    // 刷新页面保存当前的颜色    const headerColor = localStorage.getItem("headerColor")    if (headerColor) {      this.$store.commit("setHeaderColor", headerColor)    }  },  computed: {    // 通过计算属性调用    ...mapState(["headerColor"])  },//样式

  1. 如果你想实现el-main主体部分的样式，那么用上面同样的方法，在vuex，美化页面，home组件相继加上body的代码，修改相对应的逻辑就可以使用了~

  2. 效果图

关键词：