Vuejs,为什么在商店模块

时间:2019-08-30 14:47:01

标签: vue.js vuejs2 vuex vue-router vuex-modules

我需要在商店中设置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 有人可以帮忙吗? 谢谢

2 个答案:

答案 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插件处理它。但这是另一个故事。 感谢您抽出宝贵时间来查看它。