Question

嗨，我是Nuxt JS的新手用户。我正在尝试为我的Nuxt项目使用Vuex模块模式。

基本上，我在VueX模块中使用axios。我的代码如下：

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>

我的问题是：

我意识到，每当刷新不需要用户的其他页面上的页面时，它都会再次向我的api发送GET请求以获取用户。如何仅将模块用于我需要的页面，例如 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模块。

如何为Nuxt JS正确使用Vuex模块模式？

1 个答案: