1

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

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

存储/模块/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
4

1 回答 1

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 调用保留在 store 中，您可以将其从 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 模块。

于 2018-12-16T00:15:42.993 回答