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
我如何使用模块来使用 if 对于其他请求，如 GET 评论，如果它应该在 store/modules/comments.js 下，然后再次包含它 store.js

Answer 1

当你在你的 vuex 商店中设置模块时，它们只是你商店的一部分，这当然是全球性的，而且永远都是。因此，您不能仅将其应用于 select 页面或组件。如果您想将 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 模块模式？

How to properly use Vuex module mode for Nuxt JS?

javascript

vue.js

vuex

nuxt.js

vuex-modules