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

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 cmets）应位于 store/modules/cmets.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 调用保留在 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 模块都可以以同样的方式使用。