Vuejs, 왜 이런 거지?스토어 모듈에서 액세스할 때 $store.state.route.params.activityId가 정의되지 않았습니다.

Vuejs, 왜 이런 거지?스토어 모듈에서 액세스할 때 $store.state.route.params.activityId가 정의되지 않았습니다.

저는 매장에 현재 아이디를 설정해야 합니다.구성 요소에 포함되어 있습니다. 콘솔에는 문제가 없습니다.

async created() {
    const activityId = await this.$store.state.route.params.activityId
    activityId: 'activityId'
    console.log("here activityId: ", activityId)
    console.log('print all params: ', this.$store.state.route.params)
    console.log("STORE: ", this.$store.state)
  },

저는 매장을 모듈로 구성했는데, 제가 작업하고 있는 것은 activity.js이고 잘 작동하고 있습니다(저는 매장에 저장된 모든 활동을 가지고 있습니다).이제 현재 ID를 설정한 다음 해당 ID에 따라 단일 활동을 설정해야 합니다(데이터에 액세스할 수 있음).고유하지 않은 코드를 제거하는 것은 다음과 같습니다.

import {
  activityId
} from '@/views/ActivityDetail'

const state = {
  currentActivityId: activityId
}

const mutations = {
  SET_CURRENT_ACTIVITY_ID: (state, currentActivityId) => {
    state.currentActivityId = currentActivityId
  }
}

const actions = {
  setCurrentActivityId({
    commit
  }) {
    return new Promise(resolve => {
      commit('SET_CURRENT_ACTIVITY_ID', '')
      resolve()
    })
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

제가 가지고 있는 'getters' 모듈에서는 다른 모듈들 중에서도 (잘 작동하고 있는 것들)

activityId: state => state.activity.activityId,

여전히activityId: undefined

있습니다sync (store, router)작동, 또한mode: 'history'라우터에서, 이 전에 시도했기 때문에:

import {router} from '@/router'
const state = {
  currentActivityId: router.currentRoute.params.activityId,
}

저는 모드: 이력에 대해 변경을 하지 않아서 여기서 문제를 찾을 수 있을지 모르겠습니다.하지만 그것에 대해 언급하고 현재의 Route를 사용하는 것은 문제를 해결하지 못했습니다.

내 앱에 설치된 버전은 "vue-router": "3.0.6", "vuex": "^3.1.0", "vuex-router-sync": "^5.0.0"입니다.

여전히activityId: undefined누구 좀 도와주시겠어요?감사해요.

저는 그 문제를 해결했습니다.실제로 단일 활동을 저장하기 위해 현재 활동 ID를 사용하지 않았습니다.제가 한 일은 다음과 같습니다. 모든 작업이 포함된 템플릿에서 버튼을 다음과 같이 수정했습니다.

<b-button
  v-b-tooltip.hover
  title="Mostra dettagli"
  variant="info"
  class="px-3"
  @click="goToDetailActivity((data.item), selectActivity(data.item))"
>

이제 클릭한 활동에 대한 @click 버튼이 다음 두 가지 방법을 트리거합니다.

selectActivity(activity) {
      let currentActivity = activity;
      currentActivity = this.$store.getters.currentActivity;
      return currentActivity;
    },
    goToDetailActivity(activity) {
      console.log('OBJECT activity sent from all activities to detail: ', activity)
      const activityData = {
        activity: activity
      }
      console.log('ACTIVITY DATA IN ALL: ', activityData)
      this.loading = true
      this.$store.dispatch('activity/setCurrentActivity', activityData).then(() => {
        this.$router.push({
          name: 'DettaglioAttivita',
          params: {
            activityId: activity.id
          }
        })
        this.loading = false
      }).catch((err) => {
        console.log('ERROR IN fetching activityData: ', err)
        this.loading = false
      })
    }

게터 모듈에서:

currentActivity: state => state.activity.currentActivity

In store/activity.js: -state:

currentActivity: ''

-항목:

SET_CURRENT_ACTIVITY: (state, activityData) => {
    state.currentActivity = activityData
  }

-항목:

setCurrentActivity({ commit }, activityData) {
    commit('SET_CURRENT_ACTIVITY', activityData)
  }

데이터를 전달하기 위해 페이로드(activityData)가 필요했습니다.그리고 분명히 전체적인 것을 다시 생각해보세요.이제 효과가 있습니다.하지만 페이지를 새로 고치면 모든 데이터가 손실됩니다.저는 vuex-perspeted state 플러그인으로 처리하고 있습니다.하지만 이것은 다른 이야기입니다.시간을 내주셔서 감사합니다.

당신이 하려고 하는 것은 하는 것입니다.set스토어에 있는 특정 '활동'의 ID를 사용하여 이 '활동'에 대한 자세한 정보를 다른 페이지에 표시할 수 있습니다.

스토어에서 데이터를 설정하려면 항상 다음을 사용해야 합니다.commit()만약 당신이 그것을 사용한다면 더욱 좋습니다.action()그것이 트리거합니다.commit()설정 안 함state당신의store직접(예:this.$store.state.bar = 23<- 그러지 마세요).

다음은 기능을 설계하는 방법의 예입니다.

// Template in 'activitySelecotr.vue'
...
<div
  v-for="activity in activities"
  :key="activity.id"
  class="activity"
>
  // other stuff
  <button @click="showMoreInfo(activity.id)">Show more Information</button>
</div>
...

computed: {
  activities() {
    return this.$store.state.allActivities;
  },
  ...
}

methods: {
  showMoreInfo(activityId) {
    this.$store.dispatch('activityModule/setCurrentActivityId', activityId);
  },
  ...
}

---

// in 'activityDetails.vue'
...
computed: {
  activityId() {
    return this.$store.state.activityModule.currentActivityId;
  },
  ...
},
created() {
  console.log("activityId: ", this.activityId);
},
...

---

// store/activityModule.js

const state = {
  ...
  currentActivityId: null,
};

const actions = {
  setCurrentActivityId({ commit }, activityId) {
    // do stuff, for example load activity data
    commit('SET_CURRENT_ACTIVITY_ID', activityId);
  },
  ...
};

const mutations = {
  SET_CURRENT_ACTIVITY_ID(state, activityId) {
    state.currentActivityId = activityId;
  },
  ...
};

코드가 작동하지 않는 이유는 제공한 정보로 답변하기 어렵습니다. 당신의 하만적 당신코드에 수 .created()함수가 유효한 JavaScript가 아닙니다.

async created() {
  // const activityId = await this.$store.state.route.params.activityId
  // ^ why is your route stored in your store? You can do the following:
  const activityId = this.$route.params.activityId;

  activityId: 'activityId' // 'activityId' is is a const and cannot be reassigned. Also you need to reasign with '='; ':' is invalid JavaScript.
  console.log("here activityId: ", activityId)
  console.log('print all params: ', this.$store.state.route.params)
  console.log("STORE: ", this.$store.state)
},

언급URL : https://stackoverflow.com/questions/57728946/vuejs-why-is-this-store-state-route-params-activityid-undefined-when-i-access