vuex的使用及vuex状态管理实现网页的主题切换（css）

最新推荐文章于 2024-04-04 18:10:00 发布

咸粽子的咖啡厅丿

最新推荐文章于 2024-04-04 18:10:00 发布

阅读量647

点赞数

文章标签： vue css

本文链接：https://blog.csdn.net/qq_37288563/article/details/116044839

版权

本文介绍了如何利用vuex实现网页主题切换。通过安装vuex，理解其作为状态管理工具的作用，创建store文件夹，包含theme.js、getters.js和index.js等文件，维护全局主题状态。通过dispatch方法调用changeStyle，实现主题切换。在组件中，可通过this.store.getters访问和切换主题。

摘要由CSDN通过智能技术生成

vuex的使用及vuex状态管理实现网页的主题切换（css）

0. vuex的安装

npm install vuex

1. vuex的概念及作用

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

上面只是简单的vuex的概念，当你需要在vue项目中维护一个“全局变量”的时候，你就可以用vuex来实现，所有的组件都可以访问到该“全局变量"，并且该”全局变量“的改变也会被所有组件监听到。

2. vuex的使用

官网其实也提到了vuex的使用，但没有一个比较优雅的结构，我在学习vue-admin-template项目中发现了这么一个优雅的vuex的结构，下面给大家分享一下：
在这里插入图片描述

需要维护的”全局变量“（状态）我们一般在项目中新建一个store的文件夹，然后将内容填充进去，现在说一说各js文件的作用。

vuex的核心概念一共有5个，state、getters、mutations、actions、moudles 具体概念请参考官方文档

[https://vuex.vuejs.org/zh/guide/state.html]:

各js代码如下：

theme.js

该文件是关于主题的状态维护

modules文件下就是放各种模块的，关于主题的模块theme.js，还可以放比如用户的状态管理模块 user.js

代码中的css文件是我事先写好的，大家可以根据自己项目的需求自己去写

只要调用下方的changeStyle方法，传入type类型即可切换主题css
this.$store.dispatch('changeStyle','dark')

const getDefaultState = () => {
   
    let head = document.getElementsByTagName('HEAD').item(0);
    let style = document.createElement('link')
    style.href = './theme/default.css';// ./theme/dark-theme.css
    style.rel = 'stylesheet';
    style