vue store 中使用全局变量

Vue Store（Vuex）是一个专为 Vue.js 应用程序设计的状态管理模式，它允许你在应用中集中存储和管理共享的数据。全局变量（通常称为状态）在 Vuex 中是通过 `store` 对象来管理的，特别是通过 `state` 属性来定义。

1. **状态（State）**：`store.state` 是一个响应式的 JavaScript 对象，用来存储应用程序的全局状态。你可以在这里定义任何你需要在整个应用中共享的数据。当你在组件中访问这个状态时，Vue 的响应式系统会自动跟踪其变化。

// store.js
export default new Vuex.Store({
  state: {
    globalVariable: 'Hello from Global'
  }
})

2. **获取全局变量**：在组件内部，你可以通过 `this.$store.state` 访问这些全局变量，例如：

<template>
  <div>
    {{ globalVariable }}
  </div>
</template>

<script>
export default {
  computed: {
    globalVariable() {
      return this.$store.state.globalVariable;
    }
  }
}
</script>

3. **改变全局变量**：如果你想更新状态，需要通过 mutations，这是一种在 store 中定义的可复用的函数，它们处理状态的更新。例如：

mutations: {
  updateGlobalVariable(state, newValue) {
    state.globalVariable = newValue;
  }
}

然后在组件中调用：

methods: {
  changeGlobalVariable() {
    this.$store.commit('updateGlobalVariable', 'New value');
  }
}