vue3 页面初始化加载随机展示图片

在 Vue3 中，你可以使用 Vuex 状态管理库来管理页面的随机图片数据，并结合组件模板和生命周期钩子函数来动态展示。以下是简单的步骤：

1. **安装依赖**：
首先安装 vuex 和 axios 或者 fetch 来获取远程图片：

   npm install vuex axios

2. **创建 store**：
在 `store/index.js` 中创建一个状态（state）存储图片列表和选择的随机索引：

   import { createStore } from 'vuex';
   
   export default createStore({
     state: {
       images: [], // 存放图片URL数组
       randomIndex: null, // 当前随机显示的索引
     },
     mutations: {
       setImages(state, images) {
         state.images = images;
       },
       selectRandomImage(state) {
         const index = Math.floor(Math.random() * state.images.length);
         state.randomIndex = index;
       },
     },
   });

3. **获取图片数据**：
使用 axios 或 fetch 获取远程图片数据并在 `actions` 中处理：

   import axios from 'axios';

   export const fetchImages = async () => {
     try {
       const response = await axios.get('https://api.example.com/images');
       return response.data; // 假设返回的是包含图片URL的数组
     } catch (error) {
       console.error(error);
     }
   };

4. **组件内使用Vuex**：
在需要显示图片的组件里，通过计算属性和 watch 监听 store 的变化：

   <template>
     <img :src="selectedImageUrl" />
   </template>

   <script>
   import { mapState, mapActions } from 'vuex';
   
   export default {
     computed: {
       selectedImageUrl() {
         return this.$store.state.images[this.$store.state.randomIndex];
       },
     },
     mounted() {
       this.fetchImages();
       this.selectRandomImage();
     },
     methods: {
       ...mapActions(['fetchImages', 'selectRandomImage']),
     },
   };
   </script>

5. **初始化 store**：
在 main.js 或 App.vue 文件中创建并使用 store：

   import store from './store';

   new Vue({
     store,
     // 其他配置...
   }).$mount('#app');

每次页面初始化或刷新时，`fetchImages`会被自动触发，然后在 `mounted` 生命周期钩子中调用 `selectRandomImage` 选取随机图片并设置到组件上。