Question

重新加载页面后，我的数据没有出现在屏幕上，但是我将其存储在商店中。在重新加载页面安装的挂钩后，我注意到无法使用。可以是什么？我正在使用nuxt

Answer 1

这可能是由于许多原因。数据如何最终存储在商店中？它是静态的（已经硬编码到商店数据中）还是从其他来源（如API）获取？

如果没有您的代码，我将无济于事-请分享一下，我会看看：）

通常，请熟悉以下概念，以便您了解Vue和Nuxt如何一起工作并处理数据：

https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram（这是Vue生命周期）
https://nuxtjs.org/guide#schema（这是Nuxt最主要的工作方式）
https://dev.to/lilianaziolek/understanding-nuxt-vue-hooks-and-lifecycle-part-1-48lc（有关这些概念的很多文章）

Answer 2

您可以做的是创建一个在商店中调用action的插件，该插件可以从ajax或localStorage等其他来源加载数据，并将数据加载到您的状态。您还需要一些东西来保存您的状态。

一个示例模块；如果您不使用模块，请将其移至Vuex.Store({...})：

const store1 = {
  state: { value1: '' },
  mutations: {
    setValue(state, value) {
      state.value1 = value
    }
  },
  actions: {
    async load({ commit }) {
      let data = await fetch('/getMyValue')
      let json = await data.json()
      commit('setValue', json.value)
    },
    // Call `store.dispatch('store1/save')` to save
    async save({ state }) {
      await fetch('/setMyValue', {
        method: 'post',
        data: JSON.stringify(state) // Data should contain: { value: 'my value' }
      })
    }
  }
}

然后您将使用以下模块创建存储的根目录，如下所示。它有一个基本的插件。商店完成加载后，将调用plugins数组中的每个函数。在我们的例子中，我们将使用它来加载/初始化商店或模块中的数据。

export const store = new Vuex.Store({
  // Remove if you are not using modules
  modules: {
    store1, store2
  },
  plugins: [
    store => {
      // Use `store.dispatch('load')` if you are not using modules
      store.dispatch('store1/load')
      store.dispatch('store2/load')
    }
  ]
})

重新加载页面后安装的挂钩不起作用

2 个答案: