Vue 自定义主题、logo如何监听其变化及实时更新（Vuex状态管理）

官网地址：

Vuex官网 首先了解Vuex，下面内容不具体描述Vuex基础知识。

---

问题描述：

在项目中遇到需求：自定义系统的logo、title、主题颜色等，此时修改这些系统配置时会涉及到同步更新问题。例如在系统配置管理页面更新系统logo，则系统logo自动更新。（意思就是在vue项目中更新logo写在A组件，logo在B组件，A中logo值发生改变，无法实时更新B中logo，需要使用vue提供的vuex技术）

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

---

结构目录：

store
    ├── index.js          # 我们组装模块并导出 store 的地方
    └── modules
        ├── user.js       # 用户模块
        └── conmmon.js    # 公共模块
 

 index.js

import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
import common from './modules/common'

Vue.use(Vuex)
const store = new Vuex.Store({
  modules: {
    user,
    common
  }
})

export default store

user.js

import {getStore, setStore} from '@/util/store'
import {getSystemInfo} from '@/api/home/systemConfig'

const user = {
  state: {
    system_info: getStore({
			name: 'system_info'
		}) || undefined,
  },
  actions: {
    // 获取系统信息
    GetSystemInfo({commit}) {
      return new Promise(resolve => {
        getSystemInfo().then(res => {
          const data = res.data.data
          commit('SET_SYSTEM_INFO', data)
          resolve(data)
        }).catch(error => {
          reject(error)
        })
      })
    },
  },
  mutations: {
    // 系统信息
    SET_SYSTEM_INFO: (state, system_info) => {
			state.system_info = system_info
			setStore({
				name: 'system_info',
				content: system_info,
				type: 'session'
			})
		}
  }

}
export default user

---

导航（如何监听数据变化）

修改主题色页面具体代码