Как правильно использовать режим модуля Vuex для Nuxt JS?

Question

Привет, я новичок в Nuxt JS. Я пытаюсь использовать режим модуля Vuex для моего проекта Nuxt.

В основном я использую axios внутри моего модуля VueX. Мой код ниже:

магазин / модули /users.js

import axios from 'axios';

const state = () => ({
  users: []
});

// Sets the values of data in states
const mutations = {
  setUsers(state, users) {
    state.users = users;
  }
};

const actions = {
  nuxtServerInit(vuexContext, context) {
    return axios.get('https://sample-url.com/users')
    .then((response) => {
      vuexContext.commit('setUsers', response.data.data.results);
    })
    .catch((err) => {
      context.error(err);
    });
  }, 

  setUsers(vuexContext, users) { 
    vuexContext.commit('setUsers', users);
  }
};

// retrieves the data from the state
const getters = {
  getUsers(state) {
    return state.users;
  }
};

export default {
  state,
  mutations,
  actions,
  getters
};

тогда я включаю этот модуль в store/index.js

import Vuex from 'vuex';
import Users from "~/store/modules/users";
const createStore = () => {
  return new Vuex.Store({
     state: {},
     mutations: {},
     modules: {
       Users
     }
  })
}

export default createStore;

затем я получаю пользователей, хранящихся в моем Vuex, на одной из моих страниц, например: pages/index.vue

<script>
export default {
  computed: {
    loadedUsers() {
      return this.$store.getters.getUsers;
    }
  }
}
</script>

Мои вопросы:

• Когда я обновлял страницу на других страницах, я осознавал, что пользователи мне не нужны, он снова отправляет запрос GET моему API для получения пользователей. Как я могу использовать модули только для тех страниц, которые мне нужны, например pages/index.vue
• Как я могу использовать модули для использования, если для других запросов, таких как GET комментарии, он должен быть в store/modules/comments.js, затем включить его снова в store.js

Answer 1

Когда вы настраиваете модули в вашем магазине vuex, они просто являются частью вашего магазина, который, конечно, глобален и всегда будет. Поэтому вы не можете применять его только для выбора страниц или компонентов. Если вы хотите ограничить ваш вызов API только теми страницами, которые используют возвращенные данные, вы можете сделать это несколькими способами.

Во-первых, вы можете полностью удалить вызов API из магазина и сделать это на своей странице, используя asyncData. Так что-то вроде этого:

//users.vue
<script>
export default {
    data: () => ({
        users: []
    }),
    async asyncData({$axios}) {
        let {data} = await $axios.$get('https://sample-url.com/users')
        return {
            users: data
        }
    }
}
</script>

В противном случае, если вы предпочитаете хранить свои вызовы API в магазине, вы можете извлечь его из nuxtServerInit и отправить его со страницы следующим образом.

const actions = {
  nuxtServerInit(vuexContext, context) {

  }, 

  setUsers(vuexContext, users) { 
    return axios.get('https://sample-url.com/users')
    .then((response) => {
      vuexContext.commit('setUsers', response.data.data.results);
    })
    .catch((err) => {
      context.error(err);
    });
  }
};

Затем отправьте setUsers со своей страницы следующим образом:

mounted: function () {
  this.$nextTick(function () {
    this.$store.dispatch('setUsers')
  })
},
computed: {
  loadedUsers() {
    return this.$store.getters.getUsers;
  }
}

Что касается второй части вашего вопроса, любой другой модуль vuex можно использовать таким же образом.