**以下内容仅供自己学习使用
话不多说，直接上代码
- 首先去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;
- 来到颜色点击切换页面，先上效果图，后上代码(建议复制到编辑器当中去看)
效果图
<template>
<div class="color-container">
<el-card>
<h3 style="margin-bottom: 20px;">头部样式/<span style="font-size:12px; color:#333;">HeaderColor</span> </h3>
<el-row :gutter="24">
<el-col :span="5">
<div class="grid-content bg-purple">
<div class="color-block default-color" :class="{ active: headerColor === 'default-header' }" @click="updateHeaderColor('default-header')">
<span style="color:#fff;padding: 10px;">#409EFF</span>
<i class="el-icon-check" v-if="headerColor === 'default-header'"></i>
</div>
</div>
</el-col>
<el-col :span="5">
<div class="grid-content bg-purple">
<div class="color-block red-color" :class="{ active: headerColor === 'red-header' }" @click="updateHeaderColor('red-header')">
<span style="color:#fff;padding: 10px;">#EB507E</span>
<i class="el-icon-check" v-if="headerColor === 'red-header'"></i>
</div>
</div>
</el-col>
<el-col :span="5">
<div class="grid-content bg-purple">
<div class="color-block green-color" :class="{ active: headerColor === 'green-header' }" @click="updateHeaderColor('green-header')">
<span style="color:#fff;padding: 10px;">#4BAE4F</span>
<i class="el-icon-check" v-if="headerColor === 'green-header'"></i>
</div>
</div>
</el-col>
<el-col :span="5">
<div class="grid-content bg-purple">
<div class="color-block orange-color" :class="{ active: headerColor === 'orange-header' }" @click="updateHeaderColor('orange-header')">
<span style="color:#fff;padding: 10px;">#FF9900</span>
<i class="el-icon-check" v-if="headerColor === 'orange-header'"></i>
</div>
</div>
</el-col>
<el-col :span="4">
<div class="grid-content bg-purple">
<div class="color-block purple-color" :class="{ active: headerColor === 'purple-header' }" @click="updateHeaderColor('purple-header')">
<span style="color:#fff;padding: 10px;">#9B5DE5</span>
<i class="el-icon-check" v-if="headerColor === 'purple-header'"></i>
</div>
</div>
</el-col>
</el-row>
</el-card>
</div>
</template>
<script>
import { mapActions, mapState } from 'vuex'
export default {
name: 'AdminBeautification',
computed: {
...mapState(['headerColor'])
},
methods: {
...mapActions(['updateHeaderColor'])
}
};
</script>
<style lang="scss" scoped>
.default-header {
background-color: #409eff;
}
.red-header {
background-color: #eb507e;
}
.green-header {
background-color: #4bae4f;
}
.orange-header {
background-color: #f90;
}
.purple-header {
background-color: #9b5de5;
}
.default-color {
background-color: #409eff;
}
.red-color {
background-color: #eb507e;
}
.green-color {
background-color: #4bae4f;
}
.orange-color {
background-color: #f90;
}
.purple-color {
background-color: #9b5de5;
}
.color-block:hover {
transform: scale(1.1);
box-shadow: 0 0 12px #aaa;
}
.color-block {
float: left;
position: relative;
width: 200px;
height: 200px;
cursor: pointer;
border: 2px solid #fff;
overflow: hidden;
transition: transform 0.3s ease-in-out;
i {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
font-size: 60px;
}
&:hover {
box-shadow: 0 0 6px #fff;
}
}
.active {
box-shadow: 0 0 6px #fff;
}
</style>
- 最后来到home组件调用
使用
切记不用再在data里面定义headerColor，不然会报错的！
created () {
// 刷新页面保存当前的颜色
const headerColor = localStorage.getItem('headerColor')
if (headerColor) {
this.$store.commit('setHeaderColor', headerColor)
}
},
computed: {
// 通过计算属性调用
...mapState(['headerColor'])
},
//样式
<style lang="scss" scoped>
.default-header {
background-color: #409eff;
}
.red-header {
background-color: #eb507e;
}
.green-header {
background-color: #4bae4f;
}
.orange-header {
background-color: #f90;
}
.purple-header {
background-color: #9b5de5;
}
</style>