vue3.0 vuex对全局变量global的修改和读取

Vue 3.0 中的 Vuex 是一个状态管理模式，它用于集中管理应用的所有组件共享的状态。关于全局变量（通常称为 "state"），Vuex 使用单向数据流原则，所以你在组件外部直接修改 global 变量通常是不推荐的做法。

在 Vue.js + Vuex 的架构中，正确的做法是在 store 中管理 state，并通过 actions 和 mutations 来改变状态。组件通过 `this.$store.state` 或者 `this.$store.getters` 来读取状态，而不是直接操作全局变量。这样可以保持状态的变化追踪以及组件间的隔离。

以下是修改和读取全局状态的基本步骤：

1. **修改 state**:
- 在 Vuex store 的 mutations（处理器函数）中更新 state。例如：

     export const UPDATE_GLOBAL_VARIABLE = 'UPDATE_GLOBAL_VARIABLE';
     mutations: {
       [UPDATE_GLOBAL_VARIABLE] (state, value) {
         state.globalVariable = value;
       }
     }

- 在需要的地方调用 mutation 函数：

     this.$store.commit(UPDATE_GLOBAL_VARIABLE, newValue);

2. **读取 state**:
- 定义 getter（获取器）来从 state 中提取计算后的值：

     export const GET_GLOBAL_VARIABLE = 'GET_GLOBAL_VARIABLE';
     getters: {
       getGlobalVariable: state => state.globalVariable
     }

- 在组件中使用：

     console.log(this.$store.getters.getGlobalVariable);