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

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 具体概念请参考官方文档

[vuex.vuejs.org/zh/guide/st…]:

各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.type = 'text/css';
    head.appendChild(style)
    return {
        head: head,
        style: style
    }
}

const state = getDefaultState()

const mutations = {
    'CHANGE_STYLE': (state, href) => {
        if(state.style.href!=href){
            state.head.removeChild(state.style)
            let style = document.createElement('link')
            style.href = href;// ./theme/dark-theme.css
            style.rel = 'stylesheet';
            style.type = 'text/css';
            state.style = style;
            state.head.appendChild(state.style);
        }
    },
}

const actions = {
    'changeStyle':({commit},type)=>{
        let href = ''
        switch (type) {
            case 'dark':
                href = './theme/dark-theme.css'
                break;
            case 'light':
                href = ''
                break;
        }
        commit('CHANGE_STYLE',href)
    },
    'initStyle':({commit})=>{
        commit('CHANGE_STYLE','./theme/default.css')
    },
}


export default {
    state,
    mutations,
    actions
}
复制代码

getters.js

Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

在vue组件中访问方式：this.$store.getters.head、this.$store.getters.style

const getters = {
    head:state=> state.theme.head,
    style:state=> state.theme.style
}

export default getters
复制代码

index.js

该文件是对上面的一个汇总,将状态暴露出来

import Vue from 'vue'
import Vuex from 'vuex'
import theme from './modules/theme'
import user from './modules/user'
import getters from './getters'

Vue.use(Vuex)

const store = new Vuex.Store({
    modules:{
        theme,
        user,
        sign
    },
    getters

})
export default store
复制代码

暴露出来的store需要在main.js中引用

import Vue from 'vue'
import App from './App.vue'
import store from "./store";

new Vue({
  render: h => h(App),
  store
}).$mount('#app')
复制代码

那么只需要在vue组件中this.$store.dispatch(‘changeStyle’,’dark’)就可以切换相应的css主题样式