Vue.js CLI模板下可全局访问且修改的变量声明方案咨询

Hey there! Let's break down the best practical approaches to create a reactive global variable in your Vue CLI app—one that every component can access and modify without headaches. Here are the top options tailored to different project sizes:

If your app has non-trivial state management needs (like user auth, theme settings, or shared data across many components), go with Pinia (Vue 3's official state manager) or Vuex (Vue 2's standard). It’s designed exactly for this use case, with devtools support and clear state mutation patterns.

Example with Pinia: #

First, create a store file:

// src/stores/globalState.js
import { defineStore } from 'pinia'

export const useGlobalStore = defineStore('globalState', {
  // Initial state
  state: () => ({
    sharedValue: 'Hello, global!'
  }),
  // Methods to modify state (encapsulates logic)
  actions: {
    updateSharedValue(newValue) {
      // You can add validation or side effects here
      this.sharedValue = newValue
    }
  }
})

Register Pinia in your main.js:

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const app = createApp(App)
app.use(createPinia())
app.mount('#app')

Use it in any component:

// src/components/AnyComponent.vue
<script setup>
import { useGlobalStore } from '@/stores/globalState'

const store = useGlobalStore()

// Access the value
console.log(store.sharedValue)

// Modify via action (recommended for consistency)
store.updateSharedValue('Updated global value!')

// Or modify directly (works, but actions are better for logic)
store.sharedValue = 'Direct update'
</script>

<template>
  <p>{{ store.sharedValue }}</p>
</template>

Pros: Full state tracking, devtools integration, scalable for large apps.
Cons: Overkill for tiny apps with just one global variable.

If you only need a handful of global variables and don’t want the overhead of a state manager, create a standalone module with Vue’s reactive to keep it reactive.

Example: #

Create a utility file:

// src/utils/globalState.js
import { reactive } from 'vue'

// Reactive global state object
export const globalState = reactive({
  count: 0,
  userName: ''
})

// Optional: Helper function to modify state (keeps logic centralized)
export const incrementCount = () => {
  globalState.count++
}

Import and use in components:

// src/components/AnyComponent.vue
<script setup>
import { globalState, incrementCount } from '@/utils/globalState'

// Access
console.log(globalState.count)

// Modify directly
globalState.userName = 'Alice'

// Or use helper function
incrementCount()
</script>

<template>
  <p>Count: {{ globalState.count }}</p>
  <p>User: {{ globalState.userName }}</p>
</template>

Pros: Super simple, no setup required, perfect for small apps.
Cons: No devtools tracking, harder to debug state changes in large apps.

If you need to pass state deeply through component trees without prop drilling, Vue’s provide and inject is a solid choice. It works for both Vue 2 and 3.

Example (Vue 3 Composition API): #

In main.js, provide the global state:

import { createApp, reactive, provide } from 'vue'
import App from './App.vue'

const app = createApp(App)

// Reactive state
const globalState = reactive({
  theme: 'light'
})

// Function to update state
const setTheme = (newTheme) => {
  globalState.theme = newTheme
}

// Provide to all child components
app.provide('globalState', globalState)
app.provide('setTheme', setTheme)

app.mount('#app')

Inject and use in any child component:

// src/components/DeepChildComponent.vue
<script setup>
import { inject } from 'vue'

const globalState = inject('globalState')
const setTheme = inject('setTheme')

// Access
console.log(globalState.theme)

// Modify
setTheme('dark')
</script>

<template>
  <button @click="setTheme('dark')">Switch to Dark Mode</button>
  <p>Current Theme: {{ globalState.theme }}</p>
</template>

Pros: Avoids prop drilling, works for deep component trees.
Cons: Less intuitive for global state used across all components (state managers are clearer here).

If you’re still on Vue 2, you can attach reactive state to the Vue prototype. Note: This isn’t recommended for Vue 3, as it uses a different app instance model.

Example: #

In main.js:

import Vue from 'vue'
import App from './App.vue'

// Make state reactive with Vue.observable
Vue.prototype.$globalState = Vue.observable({
  message: 'Hello from prototype!'
})

new Vue({
  render: h => h(App)
}).$mount('#app')

Use in components:

// src/components/AnyComponent.vue
<script>
export default {
  mounted() {
    // Access
    console.log(this.$globalState.message)
    // Modify
    this.$globalState.message = 'Updated prototype message!'
  }
}
</script>

<template>
  <p>{{ $globalState.message }}</p>
</template>

Pros: Simple for Vue 2 apps.
Cons: Not supported in Vue 3, poor type support, hard to track state changes.

Quick Recommendation: #

• For large apps with complex state: Pinia/Vuex
• For small apps with simple global state: Reactive Global Module
• For deep component tree state sharing: Provide/Inject

内容的提问来源于stack exchange，提问作者Dhiaa Eddin Anabtawi