当您 return 时强制页面刷新状态

Question

我在 SPA 模式下使用 Nuxt，页面结构如下：

pages

...

- users/
- - index
- - new
- - update/
- - - _id

...

我有一个用户页面，其中包含他们的列表和 'subpage' - 新的。

在我的 users/index 页面上，我正在像这样在 asyncData Hook 中获取我的用户：

async asyncData({ app: { apolloProvider }, store: { commit, dispatch } }) {
    
    const {
      data: { getAllUsers: { success, users, message } },
    } = await apolloProvider.defaultClient.query({
      query: getAllUsersGQL,
    })

    if(success) {
      await commit('user/setUsers', users, { root: true })
    } else {
      dispatch('snackbar/notify', { message: message, type: 'error' }, { root: true })
    }

  },

它似乎可以正常工作。但是当我转到我的页面 users/new，填写表格并发送，更新商店并重定向到我的 users/index 页面时，我遇到了一些有趣的行为。

这里的问题是我没有新更新的状态，而是缓存了一个或以前的状态。到目前为止，我可以让它与 location.replace 一起工作。当页面重新加载时，我有一个准确和更新的状态。

这就是我在 users/new 页面上处理重定向的方式：

    async save() {

      if(this.$refs.create.validate()) {
        this.loading = true
          
        delete this.form.confirm

        await this.createUserStore(this.form)

        this.$router.push(
          this.localeLocation({
            name: 'users',
          })
        )

        this.loading = false
        this.$refs.create.reset()
      }
    },

这就是我在 Vuex 中刷新状态的方式：

export const mutations = {
    updateUsers: (state, payload) => {
        state.users = [...state.users, payload].sort((a,b) => a.createdAt - b.createdAt)
    },
}

这就是我传递数据的方式：

    computed: {
        ...mapGetters({
            storeUsers: 'user/getUsers',
            storeGetMe: 'auth/getMe',
        }),
    },

<v-data-table
    :headers="headers"
    :items="storeUsers"
    :search="search"
    item-key="id"
    class="elevation-1"
    dense
>
</v-data-table>

我已经尝试使用 v-for 列出项目，但它也不起作用。当我 console.log 声明我得到所有项目时。它可以正常工作。

它没有更新视图可能是什么问题？

如果有人遇到过这种行为，我将不胜感激。

Answer 1

这可能是因为 Apollo 确实拥有 own cache 并且它首先到达缓存，因为 cache-first 是默认值。

试试这个

await apolloProvider.defaultClient.query({
  query: getAllUsersGQL,
  fetchPolicy: 'network-only',
})

补充回答

这是我之前编写的动态 GQL 查询示例

test.gql.js

import { gql } from 'graphql-tag'
import { constantCase, pascalCase } from 'change-case'

export const queryCompanyBenefitInfo = ({
  benefitType,
  needCifEligibility = false,
  needActiveOnWeekend = false,
  needCompanyContribution = false,
  needAutoRenewed = false,
  needUnitValue = false,
}) => {
  return gql`
    query {
      CompanyBenefit {
        oneOfType(benefitType: ${constantCase(benefitType)}) {
          ... on Company${pascalCase(benefitType)}Benefit {
            ${needCifEligibility ? 'cifEligibility' : ''}
            ${needActiveOnWeekend ? 'activeOnWeekend' : ''}
            ${needCompanyContribution ? 'companyContribution' : ''}
            ${needAutoRenewed ? 'autoRenewed' : ''}

            ${
              needUnitValue
                ? `unitValue {
                    value
                  }`
                : ''
            }
          }
        }
      }
    }
  `
}

并这样称呼它

import { testQuery } from '~/apollo/queries/test.gql.js'

...

await this.app.apolloProvider.defaultClient.query({
  query: testQuery({ benefitType: 'care', needCifEligibility: true }),
  fetchPolicy: 'network-only',
  errorPolicy: 'all',
})

当您 return 时强制页面刷新状态

Force page to refresh state when you return to it

javascript

vue.js

vue-router

nuxt.js

补充回答