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

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

0 голосов
/ 15 декабря 2018

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

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

store / modules / 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

1 Ответ

0 голосов
/ 16 декабря 2018

Когда вы настраиваете модули в вашем магазине 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 можно использовать таким же образом.

...