要从URL获取查询参数并将其发送到Nuxt.js项目的Store,你需要了解以下几个基础概念:
?
后面的部分),用于传递额外的信息。例如,在https://example.com/?id=123&name=test
中,id
和name
就是查询参数。以下是一个简单的示例,展示如何在Nuxt.js项目中实现这一功能:
// pages/index.vue
export default {
async fetch({ store, params }) {
const queryParams = this.$route.query;
if (queryParams.id) {
await store.dispatch('fetchDataById', queryParams.id);
}
}
}
// store/index.js
export const state = () => ({
data: null
});
export const mutations = {
SET_DATA(state, data) {
state.data = data;
}
};
export const actions = {
async fetchDataById({ commit }, id) {
// 假设这里有一个API调用
const response = await this.$axios.$get(`/api/data/${id}`);
commit('SET_DATA', response);
}
};
fetch
方法中正确获取了查询参数,并且它们存在于this.$route.query
对象中。watch
或nextTick
等方法来处理这种情况。领取专属 10元无门槛券
手把手带您无忧上云