请告诉我,当getter调用时,如何代替{ id },获取它的id并将其插入到带有vuex请求的链接中
industry.js
import { INDUSTRY } from '@/utils/store/getters.names.js'
import { FETCH_INDUSTRY } from '@/utils/store/actions.names.js'
import { SET_INDUSTRY, SET_INDUSTRY_ERROR } from '@/utils/store/mutations.names.js'
import { API_ENDPOINT } from '@/utils/store/endpoints.js'
export const state = () => ({
industry: [],
industryError: false
})
export const getters = {
[INDUSTRY]: state => state.industry
}
export const actions = {
[FETCH_INDUSTRY] ({ commit }, id) {
this.$axios.$get(`${API_ENDPOINT}/pages/?child_of=${id}&type=pages.IndustryEquipmentCategoryPage&fields=*`).then((data) => {
commit(SET_INDUSTRY, data)
}).catch((e) => {
commit(SET_INDUSTRY_ERROR)
})
}
}
export const mutations = {
[SET_INDUSTRY] (state, industry) {
state.industryError = false
state.industry = industry
},
[SET_INDUSTRY_ERROR] (state) {
state.industry = []
state.industryError = true
}
}index.js
import { FETCH_MENU, FETCH_SETTINGS, FETCH_INDUSTRY } from '@/utils/store/actions.names.js'
export const state = () => ({})
export const actions = {
async nuxtServerInit ({ dispatch }) {
dispatch(`menu/${FETCH_MENU}`)
dispatch(`settings/${FETCH_SETTINGS}`)
dispatch(`industry/${FETCH_INDUSTRY}`)
}
}actions.names.js
export const FETCH_INDUSTRY = 'fetchIndustry'getters.names.js
export const INDUSTRY = 'industry'mutations.names.js
export const SET_INDUSTRY = 'setIndustry'
export const SET_INDUSTRY_ERROR = 'SetIndustryError'我无法传递id来获取getter数据。如何在getter中传递params id,请告诉我IndustryEquipmentIndexPage.vue
<template>
<div class="eqmodel-mainwrap">
</div>
</template>
<script>
import {
Component,
Getter,
Prop,
Action,
Mutation,
Vue,
mixins,
Watch
} from "nuxt-property-decorator";
import { PhCaretRight, PhCaretLeft } from "phosphor-vue";
import { INDUSTRY } from "~/utils/store/getters.names";
import { FETCH_INDUSTRY } from "~/utils/store/actions.names";
import { SET_INDUSTRY,SET_INDUSTRY_ERROR } from "~/utils/store/mutations.names";
import { PAGES_ENDPOINT } from "@/utils/store/endpoints.js";
import { gsap, TimelineMax, Power2, Power1, clearProps } from "gsap/all";
import axios from "axios";
import { directive } from "vue-awesome-swiper";
@Component({
name: "IndustryEquipmentIndexPage",
components: {
PhCaretRight,
PhCaretLeft
}
})
export default class IndustryEquipmentIndexPage extends Vue {
@Prop() pageData;
@Action(FETCH_INDUSTRY) fetchIndustry;
@Mutation(SET_INDUSTRY) setIndustry;
@Getter(`industry/${INDUSTRY}`) industry;
get HOST() {
return process.env.HOST;
}
}
</script>发布于 2020-12-13 02:59:32
根据Vue文档,您可以使用method style access.做到这一点
export const getters = {
[INDUSTRY]: state => (id) => state.industry.find(smthg => smthg.id === id)
}https://stackoverflow.com/questions/65267825
复制相似问题