nuxtServerInit 数据未显示在页面中答案

【问题标题】：nuxtServerInit data not show in pagenuxtServerInit 数据未显示在页面中
【发布时间】：2020-08-10 13:28:56
【问题描述】：

我尝试使用 nuxtServerInit 方法。 index.js

import productsService from "../services/productsService";
export const state = () => ({
    hotDeals: [],
    specialities: []
})

export const mutations = {
    SET_SPECIALITIES(state, payload) {
        state.specialities = payload;
    }
}

export const actions = {
    async nuxtServerInit({ dispatch}, ctx) {


      try {
        await dispatch('fetchSpecialities');
      }catch (e) {
        console.log(e);
      }
    },

    fetchSpecialities({ commit }) {
      productsService.getSpecialities()
        .then(response => {
          commit('SET_SPECIALITIES', response.data);
        });
    }
}

组件使用

<template>
  <v-layout
    justify-center
    align-center
  >
      <div>

        <v-row >

          <span v-for="item in specialities">{{item.productCode}}</span>
        </v-row>
      </div>


  </v-layout>
</template>

<script>

import {  mapState } from 'vuex';


export default {

    computed: {
        ...mapState(["specialities"])
    }

}
</script>

但它在页面上没有显示任何内容。如果我在更改状态后尝试在突变中使用 console.log(state.specialities)，我可以在 Web Storm 控制台中看到数据。但在组件数据中没有显示。

【问题讨论】：

标签： vuex nuxt.js

【解决方案1】：

我认为使用观察者会解决你的问题

  watch: {
    specialities(newValue, oldValue) {
      console.log(`Updating from ${oldValue} to ${newValue}`);
    },
  },

【讨论】：