有没有办法使用Vuex和中间件在Nuxt.js中切换全局定义变量scss文件？

npm install vuex nuxt

// store/index.js

export const state = () => ({
  globalVariable: 'default value'
})

export const mutations = {
  setGlobalVariable(state, value) {
    state.globalVariable = value
  }
}

export const actions = {
  updateGlobalVariable({ commit }, value) {
    commit('setGlobalVariable', value)
  }
}

// middleware/globalVariable.js

export default function ({ store }) {
  // 在这里更新全局定义变量
  store.dispatch('updateGlobalVariable', 'new value')
}

// nuxt.config.js

export default {
  // ...
  router: {
    middleware: 'globalVariable'
  },
  // ...
}

<template>
  <div>
    <p>Global Variable: {{ globalVariable }}</p>
    <button @click="updateVariable">Update Variable</button>
  </div>
</template>

<script>
export default {
  computed: {
    globalVariable() {
      return this.$store.state.globalVariable
    }
  },
  methods: {
    updateVariable() {
      this.$store.dispatch('updateGlobalVariable', 'new value')
    }
  }
}
</script>