关于具有vuex-persist的Nuxt.js：具有vuex-persist的Nuxt.js-页面刷新后asyncData中不提供持久状态

Nuxt.js with vuex-persist - persisted state not available in asyncData upon page refresh

在刷新第一页时，asyncData函数无法获取持久状态。当我跟随另一个NuxtLink并返回到此页面时，同时状态没有发生变化，数据就在那里了。这意味着在第一次加载/刷新时，持久状态在服务器端不可用。我选择LocalStorage来保存相关状态项。

使用asyncData的页面组件：

1
2
3
4

asyncData({ app, params, store }) {
//its not available upon first refresh, but is after following a random nuxtlink and going back
const cartProducts = store.getters.getCartProducts
},

store / index.js很简单。不幸的是，刷新第一页时asyncData中的状态完全为空。

1
2
3

getCartProducts(state) {
return state.cart.products
},

vuex-persist.js已按照Github自述文件的建议以'client'模式正确导入

1
2
3
4
5
6
7
8
9
10
11

import VuexPersistence from 'vuex-persist'
/** https://github.com/championswimmer/vuex-persist#tips-for-nuxt */

export default ({ store }) => {
window.onNuxtReady(() => {
new VuexPersistence({
key: 'cartStorage'
/* your options */
}).plugin(store)
})
}

如何在调用asyncData之前确保本地存储中的相关存储条件得以保留？

您不能这样做。不可能。服务器上没有localstorage。并且asyncData在第一次加载/刷新时在服务器上执行。因此即使在理论上也无法从服务器上的localstorage中的asyncData中获取数据。