我需要在商店中设置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
有人可以帮忙吗?
谢谢
答案 0 :(得分:0)
我相信您要尝试做的是<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;
},
...
};
答案 1 :(得分:0)
我解决了这个问题。我实际上并没有使用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插件处理它。但这是另一个故事。 感谢您抽出宝贵时间来查看它。