博客站

在 Uni-app 中，页面间实现数据共享有多种方法，具体选择哪种方法取决于你的应用需求和数据共享的范围。以下是几种常见的方法：

1. 使用全局状态管理（Vuex 或 Pinia）

对于复杂的应用，使用全局状态管理库（如 Vuex 或 Pinia）是一个很好的选择。它们允许你在整个应用中集中管理状态，并在多个页面之间共享数据。

Vuex 示例：

1. 安装 Vuex：

   npm install vuex --save
   

2. 创建 Vuex Store：

   // store/index.js
   import Vue from 'vue';
   import Vuex from 'vuex';
   
   Vue.use(Vuex);
   
   export default new Vuex.Store({
     state: {
       sharedData: 'This is shared data'
     },
     mutations: {
       setSharedData(state, data) {
         state.sharedData = data;
       }
     },
     actions: {
       updateSharedData({ commit }, data) {
         commit('setSharedData', data);
       }
     },
     getters: {
       getSharedData: state => state.sharedData
     }
   });
   

3. 在 main.js 中引入 Vuex Store：

   // main.js
   import Vue from 'vue';
   import App from './App';
   import store from './store';
   
   Vue.config.productionTip = false;
   
   App.mpType = 'app';
   
   const app = new Vue({
     ...App,
     store
   });
   app.$mount();
   

4. 在页面中使用 Vuex Store：

   // pages/Page1.vue
   <template>
     <view>
       <text>{{ sharedData }}</text>
       <button @click="updateData">Update Data</button>
     </view>
   </template>
   
   <script>
   import { mapState, mapActions } from 'vuex';
   
   export default {
     computed: {
       ...mapState(['sharedData'])
     },
     methods: {
       ...mapActions(['updateSharedData']),
       updateData() {
         this.updateSharedData('New shared data');
         uni.navigateTo({
           url: '/pages/Page2/Page2'
         });
       }
     }
   };
   </script>
   

   // pages/Page2.vue
   <template>
     <view>
       <text>{{ sharedData }}</text>
     </view>
   </template>
   
   <script>
   import { mapState } from 'vuex';
   
   export default {
     computed: {
       ...mapState(['sharedData'])
     }
   };
   </script>
   

2. 使用全局变量或 globalData

对于简单的应用，可以使用全局变量或 Uni-app 提供的 globalData 对象来共享数据。

globalData 示例：

1. 在 App.vue 中定义 globalData：

   // App.vue
   <script>
   export default {
     onLaunch: function () {
       // 生命周期回调——监听小程序初始化
       console.log('App Launch');
   
       // 定义全局数据
       this.globalData = {
         userInfo: null,
         sharedData: 'This is shared data from globalData'
       };
     },
     globalData: {
       userInfo: null
     }
   };
   </script>
   

2. 在页面中使用 globalData：

   // pages/Page1.vue
   <template>
     <view>
       <text>{{ sharedData }}</text>
       <button @click="updateData">Update Data</button>
     </view>
   </template>
   
   <script>
   export default {
     data() {
       return {
         sharedData: ''
       };
     },
     onLoad() {
       // 获取全局数据
       this.sharedData = getApp().globalData.sharedData;
     },
     methods: {
       updateData() {
         const app = getApp();
         app.globalData.sharedData = 'New shared data from Page1';
   
         uni.navigateTo({
           url: '/pages/Page2/Page2'
         });
       }
     }
   };
   </script>
   

   // pages/Page2.vue
   <template>
     <view>
       <text>{{ sharedData }}</text>
     </view>
   </template>
   
   <script>
   export default {
     data() {
       return {
         sharedData: ''
       };
     },
     onLoad() {
       // 获取全局数据
       this.sharedData = getApp().globalData.sharedData;
     }
   };
   </script>
   

3. 使用本地存储（如 localStorage 或 uni.setStorageSync）

对于需要在用户会话之间持久化存储的数据，可以使用本地存储。

示例：

1. 在页面 1 中保存数据：

   uni.setStorageSync('sharedData', 'This is shared data from local storage');
   uni.navigateTo({
     url: '/pages/Page2/Page2'
   });
   

2. 在页面 2 中读取数据：

   const sharedData = uni.getStorageSync('sharedData');
   this.sharedData = sharedData;
   

4. 使用事件总线（Event Bus）

对于简单的页面间通信，可以使用事件总线。然而，这种方法不太适用于复杂的场景，因为它可能导致代码难以维护。

总结

根据你的具体需求选择适合的方法。对于简单的应用，全局变量或 globalData 可能就足够了；对于复杂的应用，全局状态管理（如 Vuex 或 Pinia）是更好的选择。