Nux JS에서 Vuex 모듈 모드를 올바르게 사용하는 방법은 무엇입니까?

Nux JS에서 Vuex 모듈 모드를 올바르게 사용하는 방법은 무엇입니까?

안녕하세요 저는 Nuxt JS의 초보 사용자입니다.Nux 프로젝트에 Vuex 모듈 모드를 사용하려고 합니다.

기본적으로 저는 VueX 모듈 안에서 공리를 사용하고 있습니다.아래 내 코드:

store/message/users.j

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;

그런 다음 페이지 중 하나인 pages/index.vue와 같은 Vuex에 저장된 사용자를 가져옵니다.

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

제 질문은 다음과 같습니다.

• 다른 페이지에서 사용자가 필요하지 않다고 페이지를 새로 고칠 때마다 사용자를 가져오기 위해 GET 요청을 다시 API로 보냅니다.i로 보냅니다.pages/index.vue와 같이 필요한 페이지에만 모듈을 사용하려면 어떻게 해야 합니까?
• GET 주석과 같은 다른 요청에 대해 store/modules/comment.js 아래에 있는 모듈을 사용한 후 다시 it store.js를 포함하는 경우 모듈을 어떻게 사용할 수 있습니까?

vuex 스토어에서 모듈을 설정하면 해당 모듈은 스토어의 일부일 뿐이며, 물론 글로벌하고 항상 그럴 것입니다.따라서 선택한 페이지나 구성요소에만 적용할 수 없습니다.api 호출을 반환된 데이터를 사용하는 페이지로만 제한하려면 몇 가지 방법으로 할 수 있습니다.

먼저 api 호출을 스토어에서 모두 꺼내 비동기 데이터를 사용하여 페이지에서 만들 수 있습니다.그래서 다음과 같은 것이 있습니다.

//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 호출을 스토어에 보관하는 것이 좋다면 nextServerInit에서 호출을 꺼내 이렇게 페이지에서 전송할 수 있습니다.

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 모듈도 동일한 방식으로 사용할 수 있습니다.

언급URL : https://stackoverflow.com/questions/53792085/how-to-properly-use-vuex-module-mode-for-nuxt-js