Как правильно использовать геттеры Vuex в Nuxt Vue Composition API?

Я использую @ nuxtjs /position-api (0.15.1), но у меня возникли проблемы с доступом к геттерам Vuex в computed ().

Это мой код в API композиции:

import { computed, useContext, useFetch, reactive } from '@nuxtjs/composition-api';

  setup() {
    const { store } = useContext();
    const products = computed(() => {
      return store.getters['products/pageProducts'];
    });
    const pagination = computed(() => {
      return store.getters['products/pagination'];
    });

    useFetch(() => {
      if (!process.server) {
        store.dispatch('products/getPage');
      }
    });

    return {
      products,
      pagination,
    };
  }

И консоль продолжает выводить предупреждение:

[Vue warn]: Write operation failed: computed value is readonly.

found in

---> <Pages/products/Cat.vue> at pages/products/_cat.vue
       <Nuxt>
         <Layouts/default.vue> at layouts/default.vue
           <Root>

Я действительно смущен. Потому что я не пытался изменить вычисляемое свойство, просто получил данные с помощью AJAX, а затем просто назначил данные состоянию в мутациях Vuex.

Но я переписываю код в option API таким образом:

export default {
  components: {
    ProductCard,
    Pagination,
  },
  async fetch() {
    if (process.server) {
      await this.$store.dispatch('products/getPage');
    }
  },
  computed: {
    products() {
      return this.$store.getters['products/pageProducts'];
    },
    pagination() {
      return this.$store.getters['products/pagination'];
    },
  },
};

Все работает нормально, ошибок и предупреждений нет. Я неправильно обращаюсь к геттерам в API композиции или это просто ошибка плагина @ nuxtjs / Composition-api?


vue.js nuxt.js vuejs3 vuejs2 vue-composition-api
person Ray    schedule 18.11.2020    source источник
comment
Хотя ваш хук fetch в API опций, вероятно, не имеет отношения к нему, работает на сервере (if (process.server)), а хук в API композиции - нет (if (!process.server)). Можете ли вы ссылаться на репро (Codesandbox или GitHub)?   -  person tony19    schedule 20.11.2020
comment
@ tony19 Вот репо shorturl.at/pCOZ6. Ты прав. Это не связано с process.server, и я также не пытаюсь решить проблему с точки зрения сервера / клиента, но все равно не могу понять. На моей памяти, я помню, что получить доступ к геттерам Vuex из computed () - это нормально.   -  person Ray    schedule 20.11.2020
comment
@ tony19 Я нашел статью, в которой говорится об этой ошибке. И воспользуйтесь другим способом, чтобы предотвратить ошибку. Спасибо большое за вашу помощь.   -  person Ray    schedule 21.11.2020

Ответы (1)


arrow_upward
1
arrow_downward

исправлено: гидратация вычисленных свойств не работает с useFetch # 207

Эта проблема не может быть решена, пока не выйдет Nuxt3.

Но я нашел альтернативное решение, которое использует промежуточное ПО () вместо использования useFetch (), если вы хотите предотвратить эту ошибку, получая данные AJAX с помощью Vuex Actions, а затем получить его с помощью геттеров с помощью computed ().

Я привожу еще один более ясный пример, который соответствует контексту вопроса выше.

~ / страницы / index.vue:

<script>
import { computed, onMounted, useContext, useFetch } from '@nuxtjs/composition-api';

export default {
  async middleware({ store }) {
    await store.dispatch('getUser');
  },
  setup() {
    const { store } = useContext();
    const user = computed(() => store.getters.user);

    return {
      user,
    };
  },
}
</script>

~ / магазин / index.js (Vuex)

const state = () => ({
  user: {},
});

const actions = {
  async getUser({ commit }) {
    const { data } = await this.$axios.get('https://randomuser.me/api/');
    console.log(data.results[0]);
    commit('SET_USER', data.results[0]);
  },
};

const mutations = {
  SET_USER(state, user) {
    state.user = user;
  },
};

const getters = {
  user(state) {
    return state.user;
  },
};

Если в моем ответе что-то не так, не стесняйтесь оставлять свои комментарии.

person Ray    schedule 21.11.2020
comment
FYI useStore теперь доступен Composition-api.nuxtjs.org/packages/store - person Nick; 08.07.2021