Vuejs，当我在商店模块中访问它时，为什么 this.$store.state.route.params.activityId 未定义

Question

我需要在 store 中设置 currentId。我在组件中有它，在控制台中一切正常：

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，然后根据它设置单个活动（这样我就可以访问它的数据）。 删除非固有代码，我所拥有的是：

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,
}

我没有对mode:history做任何改变，所以我不知道问题是否可以在这里找到。但是评论它并使用 currentRoute 并没有解决问题。

我的应用中安装的版本是： “Vue路由器”：“3.0.6”， "vuex": "^3.1.0", "vuex-router-sync": "^5.0.0"

还是activityId: undefined 有人可以帮忙吗？ 谢谢

Answer 1

我解决了这个问题。我实际上并没有使用 currentActivityId 来保存单个活动。 这是我所做的： 在包含所有活动的模板中，我修改了这样的按钮：

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

现在被点击的activity的@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
      })
    }

在 getters 模块中：

currentActivity: state => state.activity.currentActivity

在 store/activity.js 中： -状态：

currentActivity: ''

-突变：

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

-动作：

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

我需要 payolad (activityData) 来传递数据。显然重新考虑整个事情。 现在它起作用了。 但是，如果我刷新页面，我会丢失所有数据。我正在使用 vuex-persitedstate 插件处理它。但这是另一个故事。 感谢任何花时间看它的人。

Answer 2

我相信您正在尝试做的是set您商店中特定“活动”的 ID，以便您可以使用此 ID 在不同页面上显示有关此“活动”的更多信息。

要在您的商店中设置数据，您绝对应该始终使用commit()，如果您使用触发commit() 的action() 会更好。不要直接设置store 的state（例如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)
},