vue.js - Nuxt js / Vuex 无法获取由 nuxtServerInit 设置的组件的状态变量

Question

我正在尝试获取由 nuxtServerInit Axios 通过 get 方法设置的组件上的状态变量。

商店/state.js

export default () => ({
  siteData: null
})

商店/mutations.js

import initialState from './state'

const mutations = {
  SET_SITE_DATA (state, value) {
    state.siteData = {
      site_title: value.site_title,
      logo: value.logo
    }
  }
}

export default {
  ...mutations
}

商店/getters.js

const getters = {
  siteDetails: state => state.siteData
}

export default {
  ...getters
}

商店/actions.js

const actions = {
  async nuxtServerInit ({ commit, dispatch }, ctx) {
      try {
        const host = ctx.req.headers.host
        const res = await this.$axios.post('/vendors/oauth/domain/configuration', { domain: host })
        commit('SET_SITE_DATA', res.data.data.site_data)
      } catch (err) {
        console.error(err)
      }
    },
  
  export default {
    ...actions
  }
}

存储/index.js

import Vuex from 'vuex'
import mutations from './mutations'
import getters from './getters'
import actions from './actions'
import state from './state'

const store = () => {
  return new Vuex.Store({
    state,
    getters,
    mutations,
    actions
  })
}

export default store

在这里，我设置SET_SITE_DATA了设置状态的突变siteData。

组件/Header.vue

<template>
  <section class="header sticky-top">
    <client-only>
      {{ siteDetails }}
      {{ $store.getters }}
      { logo }}
    </client-only>
  </section>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  computed: {
    ...mapGetters(['siteDetails']),
    logo () {
      console.log(this.$store.state.siteData)
      return this.$store.state.siteData
    }
  }
}
</script>

安慰

我不知道这里发生了什么。你可以看到我已经安慰了这些价值观。因此，当我重新加载页面时，我可以获得值，但几秒钟后，所有值都重置为 null。我想全局设置这些值，以便可以在整个站点上访问它们。我不想在每次页面更改时调用 API，所以我使用nuxtServerInit了这样可以在页面重新加载一次并可以访问它们时全局设置值。

标签： vue.jsvue-componentnuxt.jsstatevuex