Vuex 的自动刷新

Question

我想为我的 VueX 商店实现自动刷新功能。

用户每次刷新浏览器时，都会触发 VueX 商店中的一个操作，以从 API 调用加载用户配置文件。

不可能实现吗？

import apiService from "@/services/apiService";
import apiUrls from "@/services/apiUrls";

import { getToken } from "@/services/jwtService";

// Code to run actions when user refresh
getToken() !== null ? this.actions.getUserProfile() : "";

const state = {
  userProfile: {},
};

const getters = {
  userProfile: (state) => state.userProfile,
};

const actions = {
  async getUserProfile({ commit }) {
    console.log("here");
    try {
      let response = await apiService.get(apiUrls.PROFILE);
      commit("setUserProfile", response.data.data);
    } catch (error) {
      console.log(error);
    }
  },
};

谢谢。

Answer 1

用户刷新意味着应用程序将 re-executed。所以基本上 main.js 将是 re-executed、App.vue re-created 等

这意味着只需在 main.js 或任何 top-level 组件的 created 生命周期挂钩中调用您的代码。

top-level 组件是指在应用程序早期创建的任何组件

Vuex 的自动刷新

Auto Refresh for Vuex

vue.js

vuex

vuejs3