如何从服务器全局保存数据？

Question

最近开始练习Vue，不知道怎么组织一个“全局存储”

现在，进入正题：

有必要（从服务器）获取用户数据一次，以便从任何组件使用它们。

例如，我需要获取组件中的数据：左侧菜单、顶部菜单和页面 - 这些已经是三个请求，但我想将自己限制为一个:)

我试过 vuex，但是当在组件中使用存储时，它会向服务器发出另一个请求：

userModule.js

import axios from 'axios';

export const userModule = {
    state: () => ({
        current: {},
    }),

    getters: {
        getUser(state) { return state.current },
    },

    mutations: {
        setUser(state, user) { state.current = user },
    },

    actions: {
        async updateUser({state,  commit}) {
            try {
                const response = await axios.get('/office/api/me');
                commit('setUser', response.data);
            } catch (e) {
                console.log(e);
                alert('Error');
            }
        },
    },

    namespaced: true,
}

我在组件中使用的代码：

import {mapState} from 'vuex';

export default {

  created() {
    this.$store.dispatch("user/updateUser");
  },

  computed: {
    ...mapState({
      user: state => state.user.current,
    }),
  }
}

Answer 1

只使用`updateUser`一次

这里的错误是每个组件都会加载用户，因为每个 created() 看起来像：

created() {
  this.$store.dispatch("user/updateUser");
}

您应该只初始化 VueX 一次。取决于您的 Vue3 项目是如何设置的。

您应该有一个 App.vue，您可以在其中拨打 create()，但仅限于此。然后 $store 应该可以从其他组件使用用户数据，一旦用户被加载。

如何从服务器全局保存数据？

How to globally save data from the server?

vue.js

vuejs3

只使用`updateUser`一次

如何从服务器全局保存数据？

How to globally save data from the server?

vue.js

vuejs3

只使用updateUser一次

只使用`updateUser`一次