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

Question

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

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-router": "3.0.6", "vuex": "^3.1.0", "vuex-router-sync": "^5.0.0"

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

Answer 1

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

要在您的商店中设置数据，您绝对应该始终使用 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)
},

Answer 2

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

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

现在被点击的按钮@click activity 触发这两个方法：

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 插件处理它。但这是另一个故事。感谢所有花时间查看它的人。

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

Vuejs, why is this.$store.state.route.params.activityId undefined when I access it in store module

vue.js

vuejs2

vuex

vue-router

vuex-modules