英文:
NuxtJS computed property running only on navigate
问题
组件
<script>
import { mapState } from 'vuex';
export default {
layout: 'index',
/**
* 运行状态分发
*/
async fetch({store}) {
store.dispatch('api/contracts/all')
},
/**
* 创建状态映射
*/
computed: {
...mapState({
contracts: 'contracts'
})
}
}
</script>
api/contracts
const axios = require("axios");
export const state = () => ({
contracts: [],
})
export const mutations = {
SET_CONTRACTS (state, contracts) {
state.contracts = contracts
}
}
export const actions = {
async all({ commit }) {
let response = await getApi(/api/products, this.$axios)
let contracts = response.data
commit('SET_CONTRACTS', contracts);
}
}
const getApi = async function (url, axios) {
let response = await axios.get(url)
return {
data: response.data
}
}
关于上述问题，如果我刷新页面，合同请求不会显示在网络选项卡中，但是，如果我在应用程序内导航到另一个页面，然后返回，合同请求就会出现在网络选项卡中。为什么会发生这种情况？合同请求应该在页面加载时加载。
明确一下，如果我通过 NuxtLink 导航到另一个页面（不刷新），然后返回，合同请求会在网络选项卡中可见，并且有效；如果我刷新页面，则合同请求不会被执行。
英文:
component
<script>
import { mapState } from 'vuex';
export default {
layout: 'index',
/**
* Run State Dispatches
*/
async fetch({store}) {
store.dispatch('api/contracts/all')
},
/**
* Create State Mapping
*/
computed: {
...mapState({
contracts: 'contracts'
})
}
}
</script>
api/contracts
const axios = require("axios");
export const state = () => ({
contracts: [],
})
export const mutations = {
SET_CONTRACTS (state, contracts) {
state.contracts = contracts
}
}
export const actions = {
async all({ commit }) {
let response = await getApi(`/api/products`, this.$axios)
let contracts = response.data
commit('SET_CONTRACTS', contracts);
}
}
const getApi = async function (url, axios) {
let response = await axios.get(url)
return {
data: response.data
}
}
I am having some issues with the above, if I refresh the page, the contract request isn't seen in network tab, however, if I navigate inside the application, to another page, and return, the contract request is there in network, why is this happening, the contract request should load when the page loads?
To be clear, if I navigate to another page via a NuxtLink(without refreshing), and return the contract request is visible in network tab, and works - if I refresh the page, the contract request isn't ran!
答案1
得分: 0
NuxtJS支持SSR（服务器端渲染），这意味着：
- 如果您是在页面的首次加载或刷新页面，您的请求将从服务器端执行，这就是为什么您在网络标签中看不到它的原因。
- 如果您尝试从另一个页面导航到您的页面而不刷新它，您将仅从客户端端重定向，在这种情况下，您可以在网络标签中看到您的请求。
有关更多信息，请查看：https://nuxtjs.org/docs/features/rendering-modes
您可以在组件中将'fetchOnServer'属性设置为false，以禁用从服务器端获取页面。
英文:
NuxtJS supports SSR (server side rendering) which means that :
- If you are at the first loading of the page or you refresh the page, your request will be executed from the server side and that's why you don't see it in the network tab.
- If you try to navigate to your page from another page without refreshing it you will be redirected only from the client side and in this case you can see your request in the Network tab.
For more info check : https://nuxtjs.org/docs/features/rendering-modes
You can set the'fetchOnServer' property to false in your component to disable fetching page from the server side.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论