小编Fra*_*ndi的帖子

我已经处理这个问题有一段时间了，但仍然无法解决。

我使用 React-query 作为服务器状态管理库，并且尝试在发生突变时使 UI 状态与服务器状态同步。由于我可以使用突变响应来避免新的 API 调用，因此我使用了 React-query 为我们提供的 setQueryData 功能。

问题是，当突变成功时，旧数据正在被正确修改（我可以在react-query DevTools中看到它），但使用它的组件没有被重新渲染，使得我的UI状态与我的服务器状态（好吧，至少用户看不到更新）。

让我展示一些代码并希望有人能给我一些见解。

Component using the query:

const Detail = ({ orderId }) => {
  const { workGroups } = useWorkGroups();
  const navigate = useNavigate();

  const queryClient = useQueryClient();
  const orderQueries = queryClient.getQueryData(["orders"]);
  const queryOrder = orderQueries?.find((ord) => ord.id === orderId);

// more code

Component mutating the query：

const Deliver = ({
  setIsModalOpened,
  artisan,
  index,
  queryQuantity,
  queryOrder,
}) => {
  const [quantity, setQuantity] = useState(() => queryQuantity); …

我正在使用 Vuex 4 学习 Vue 3 并且我坚持使用一些我很确定它很简单但我看不到的东西。

简而言之，我正在尝试设置一些数据，state以便在我的组件中使用它，但它不起作用。

让我向您展示代码：

/// store.js

import { createStore } from 'vuex';
import axios from 'axios';

const store = createStore({
  state: {
    user: {},
    products: []
  },
  mutations: {
    SET_USER: (state, user) => {
      state.user = user;
    },
    SET_PRODUCTS: (state, products) => {
      state.products = products;
    },
  },
  actions: {
    GET_USER: async function ({ commit }) {
      const user = await axios.get('https://coding-challenge-api.aerolab.co/user/me')
      commit('SET_USER', user)
    },
    GET_PRODUCTS: async function ({ commit }) {
      const …