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

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

关于模式：历史，我没有做任何更改，所以我不知道是否可以在这里找到问题。但是对其进行注释并使用currentRoute并不能解决问题。

我的应用中安装的版本为： “ vue-router”：“ 3.0.6”， “ vuex”：“ ^ 3.1.0”， “ vuex-router-sync”：“ ^ 5.0.0”

仍然activityId: undefined 有人可以帮忙吗？谢谢

Answer 1

我相信您要尝试做的是<body> <div id="fixed"> <div id="box1"> box1 </div> <div id="box2"> box2 </div> <div id="menu"> menu<br>menu<br>menu </div> </div> <div id="content"> content 123<br>content 456<br>content 789 <br>content 123<br>content 456<br>content 789 <br>content 123<br>content 456<br>content 789 </div> </body> html, body { height: 100%; margin: 0; box-sizing: border-box; } * { box-sizing: inherit; } #fixed { width: 100%; height: 100%; position: fixed; top:0; left:0; } #box1 { height: 80px; background: #ff0; } #box2 { height: 30px; background: #0ff; } #menu { float: left; width: 30%; background: #abc; } #content { float: right; width: 70%; padding-top: 110px; /* offset from top */ background: #cba; }您商店中特定“活动”的ID，以便您可以使用此ID在其他页面上显示有关此“活动”的更多信息。 / p>

要在商店中设置数据，绝对应该始终使用set，如果使用触发commit()的{{1}}，则更好。不要直接设置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); }, ...函数中的代码不是有效的JavaScript。

// 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;
  },
  ...
};

Answer 2

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

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

在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，为什么在商店模块

2 个答案: