Vuex 的使用：在子组件中监听全局变量的实现方法

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第19天。

使用场景

有这样一个需求，一个系统应用，左侧导航可以收缩展开，同时需要根据左侧导航的展开状态重新绘制页面。

当然也有一些场景会用到监听全局变量的场景，自己去甄别即可。

实现方法

知识点：vuex, 事件触发，computed

(1)安装配置 vuex

安装：

npm install vuex --save

配置 main.js：

import Vue from 'vue'
import Vuex from 'vuex';

Vue.use(Vuex)

//定义全局变量 clickMenu
var store = new Vuex.Store({
  state: {
    clickMenu: false
  },
  const mutations = {
      SET_MENUSHOW: (state, data) => {
        state.clickMenu = !state.clickMenu;
      }
    }
})

new Vue({
  el: '#app',
  router,
  store,  //挂载一下前面定义的store
  components: { App },
  template: ''
})

(2) 触发更新变量的事件

this.$store.commit('SET_MENUSHOW')

（3）监听数据变化并执行相关操作

 watch: {
    // 监听选项变化，重绘图表
    index(){
      this.drawCharts();
    },
    // 监听变量变化，执行相应操作
    listenComponentState: function(val, oldval){
      console.log('valllllllllllllll', this.$refs.chart.offsetWidth)
      this.$nextTick(() => {
        this.$echarts.init(this.$refs.chart).resize();
      })
    }
  },
  // 计算属性，拿到变量值
  computed:{
    listenComponentState(){
      // this.drawCharts();
      return this.$store.state.globalData.clickMenu
    }
  },

拓展

这里拓展另一种全局变量的定义方法，这里不再使用 vuex，转用最原始的方法，非常简单易于理解。

（1）定义一个全局变量的 global.js 文件

export default {
    clickMenu: false
}

(2) 引入到 main.js,并注册为全局变量

import global from './global'
Vue.prototype.GLOBAL = global

(3)在用到 GLOBAL 中的全局变量的时候，只需要一行代码即可获取。

var clickMenu = this.GLOBAL.clickMenu

(4)通过 watch 进行事件监听

建议

个人更加推荐 vuex 的方法，因为现在的 vue 项目都会集成 vuex,更便于管理公共的状态并进行相关的操作。可操作性更高，也更容易拓展。缺点就是需要付出一些学习的成本，不过现在不会 vuex 的应该也不多了吧。

相比之下，global.js这种会增加文件量，文件分布也比较分散，不方便管理。

以上纯属个人愚见，仅供参考。