vue，vuex，通过store维护很多个页面要用到的公共变量

news/2025/3/14 16:48:11/

将获取订单数量的方法放在 Vuex 的 actions 中是比较好的做法。这样可以确保数据的获取和维护逻辑集中在一个地方，并且可以在多个组件中共享这个数据。

在 Vuex 的 actions 中，你可以定义一个异步的方法来获取订单数量，并将获取到的数量保存到 store 的状态中。其他组件可以通过读取 store 中的状态来获取订单数量。

以下是一个示例代码：

// 在 store 的 actions 中定义获取订单数量的方法
const actions = {fetchOrderCount({ commit }) {// 调用获取订单数量的接口// 这里假设你使用了 axios 进行网络请求axios.get('/api/order/count').then(response => {// 获取到订单数量后，将其保存到 store 的状态中commit('setOrderCount', response.data.count);}).catch(error => {// 处理错误情况console.error('Failed to fetch order count:', error);});}
};// 在 store 的 mutations 中定义设置订单数量的方法
const mutations = {setOrderCount(state, count) {state.orderCount = count;}
};// 在 store 的 state 中定义订单数量的初始值
const state = {orderCount: 0
};

在上述代码中，fetchOrderCount 方法是一个异步的 action，它会调用获取订单数量的接口，并在获取到数量后通过 commit 方法将其保存到 store 的状态中。setOrderCount 方法是一个 mutation，用于设置订单数量的值。state 对象中定义了订单数量的初始值为 0。

在组件中，你可以使用 mapActions 辅助函数将 fetchOrderCount 方法映射到组件的方法中，并在需要的时候调用它来获取订单数量。例如：

import { mapState, mapActions } from 'vuex';export default {computed: {...mapState(['orderCount'])},methods: {...mapActions(['fetchOrderCount'])},mounted() {// 在组件加载时调用获取订单数量的方法this.fetchOrderCount();}
};