vue3不同页面共享全局变量

在Vue 3中，可以使用provide和inject来实现不同页面共享全局变量。在需要共享全局变量的页面中，可以使用provide方法将变量提供给子组件。例如，在页面1中，可以使用createApp函数创建Vue实例，并使用provide方法提供全局变量：

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

const globalVars = {
  var1: 'initial value'
}

const app = createApp(App)
app.provide('globalVars', globalVars)
app.mount('#app')

然后，在需要访问全局变量的页面中，可以使用inject方法获取响应式对象，并在需要的地方使用它。例如，在页面2中，可以使用inject方法获取全局变量，并在需要的时候改变它：

import { inject } from 'vue'

export default {
  setup() {
    const globalVars = inject('globalVars')
    
    function handleClick() {
      globalVars.var1 = 'new value'
    }
    
    return {
      handleClick
    }
  }
}

通过这种方式，不同页面之间可以共享全局变量，并在需要的时候对其进行修改。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [Vue 3中实现全局变量的供响应式共享并watch动态监听全局变量](https://blog.csdn.net/weixin_48853103/article/details/130146019)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]