vue3开发中全局数据怎么设置？怎么调用？

使用Vuex（推荐用于复杂的全局状态管理）

• 安装和配置Vuex
  • 安装：在项目目录下，通过命令 npm install vuex@next 安装Vuex。
  • 创建store文件夹和文件：在项目的src目录下创建一个store文件夹，在其中创建一个index.js文件（也可以是其他名称，但一般习惯使用index.js作为入口文件）。
  • 配置store（简单示例）：

import { createStore } from 'vuex';
const store = createStore({
  state: {
    globalData: {
      userInfo: {
        name: '示例用户',
        age: 20
      },
      themeColor: 'blue'
    }
  },
  mutations: {
    updateUserInfo(state, newUserInfo) {
      state.globalData.userInfo = newUserInfo;
    },
    updateThemeColor(state, newColor) {
      state.globalData.themeColor = newColor;
    }
  },
  actions: {
    asyncUpdateUserInfo({ commit }, newUserInfo) {
      // 可以在这里进行异步操作，比如调用API获取最新用户信息
      commit('updateUserInfo', newUserInfo);
    },
    asyncUpdateThemeColor({ commit }, newColor) {
      // 假设这里有一些异步逻辑，比如等待动画完成后更新颜色
      setTimeout(() => {
        commit('updateThemeColor', newColor);
      }, 1000);
    }
  },
  getters: {
    getUserInfo(state) {
      return state.globalData.userInfo;
    },
    getThemeColor(state) {
      return state.globalData.themeColor;
    }
  }
});
export default store;

- **解释说明**：
    - 在`store`的配置中，`state`定义了全局数据。这里有一个`globalData`对象，包含`userInfo`和`themeColor`两个属性作为示例。
    - `mutations`是用于同步修改`state`的方法。例如，`updateUserInfo`方法接收新的用户信息并更新`state`中的`userInfo`属性。
    - `actions`用于处理异步操作或者包含复杂逻辑的操作。它们可以调用`mutations`来最终修改`state`。例如，`asyncUpdateUserInfo`可以在获取最新用户信息后（这里只是示例，实际可能会调用API），调用`updateUserInfo`突变来更新用户信息。
    - `getters`类似于计算属性，用于从`state`中获取派生的数据。例如，`getUserInfo`可以获取`state`中的用户信息。

在 Vue 应用中使用 Vuex Store

在你的主 Vue 应用文件中（通常是 main.js 或 main.ts），引入并使用 Vuex Store。

import { createApp } from 'vue';
import App from './App.vue';
import store from './store'; // 引入 store

const app = createApp(App);

app.use(store); // 使用 store
app.mount('#app');

在组件中访问和修改全局数据（以setup函数为例）：

<template>
  <div>
    <p>用户姓名：{{ userInfo.name }}</p>
    <p>主题颜色：{{ themeColor }}</p>
    <button @click="updateUserInfo">更新用户信息</button>
    <button @click="updateThemeColor">更新主题颜色</button>
  </div>
</template>
<script setup>
import { computed } from 'vue';
import { useStore } from 'vuex';
const store = useStore();
const userInfo = computed(() => store.getters.getUserInfo);
const themeColor = computed(() => store.getters.getThemeColor);
console.log(themeColor.value);//获取到的是一个ref对象所有你要用.value获取具体的数据
const updateUserInfo = () => {
  const newUserInfo = {
    name: '新用户姓名',
    age: 25
  };
  store.commit('updateUserInfo', newUserInfo);
};
const updateThemeColor = () => {
  const newColor ='red';
  store.dispatch('asyncUpdateThemeColor', newColor);
};
</script>

- **解释说明**：
       - 在组件的`script setup`部分，首先通过`useStore`函数获取`store`实例。
       - 然后使用`computed`函数结合`store.getters`来获取全局数据。例如，`userInfo`和`themeColor`分别获取用户信息和主题颜色。
       - 对于修改数据，`updateUserInfo`函数通过`store.commit`调用`mutations`中的`updateUserInfo`方法来同步更新用户信息。`updateThemeColor`函数通过`store.dispatch`调用`actions`中的`asyncUpdateThemeColor`方法来异步更新主题颜色。

2. 使用 provide 和 inject (适合简单的全局数据共享)

provide 和 inject 是 Vue 的依赖注入 API，适用于跨组件的层级传递数据。

在祖先组件中使用 provide

<template>
         <div>
           <router - view />
         </div>
</template>
       <script setup>
       import { provide, ref } from 'vue';
       const globalData = ref({
         userInfo: {
           name: '示例用户',
           age: 20
         },
         themeColor: 'blue'
       });
       provide('globalData', globalData);
       </script>

• 解释说明：
  • 在这个顶层组件的script setup中，首先使用ref创建了一个包含全局数据的响应式对象globalData。然后通过provide函数将这个数据提供给所有子组件。provide函数的第一个参数是一个字符串键，用于在子组件中识别数据，第二个参数是要提供的数据对象。

在子组件中注入并使用数据（inject）： 

<template>
  <div>
    <p>用户姓名：{{ userInfo.name }}</p>
    <p>主题颜色：{{ themeColor }}</p>
  </div>
</template>
<script setup>
import { inject, computed } from 'vue';
const globalData = inject('globalData');
const userInfo = computed(() => globalData.value.userInfo);
const themeColor = computed(() => globalData.value.themeColor);
</script>

    - **解释说明**：
       - 在子组件的`script setup`中，通过`inject`函数获取由父组件提供的`globalData`。`inject`函数的参数是在父组件`provide`时使用的字符串键。
       - 由于`globalData`是一个`ref`对象，所以通过`globalData.value`来访问其内部的数据。然后使用`computed`函数创建计算属性来获取用户信息和主题颜色，这样可以在模板中方便地使用这些数据。

这两种方法都可以用于在Vue 3中设置和调用全局数据，`Vuex`更适合复杂的应用场景，需要对数据进行严格的管理和操作；而`provide`和`inject`相对简单，适用于简单的全局数据共享场景。

总结

• Vuex：适用于复杂的状态管理和跨组件通信。
• provide/inject：适用于跨层级的组件数据传递。