vue.js - Vue路由器：如何使用更新商店在它导航之前。在商店更新之前导航

Question

我是新来的Vue。我已经安装Vuex并view-router在我的Laravel应用程序中。和正在按需要工作view-router。router-link

但是，我想在单击Vue storea 时放入 item 对象，router-link以便我可以在详细视图中检索它并在那里显示所需的数据。

主页.vue

<template>
   <div v-for="item in featuredItems" :key="item.id">
      <router-link :title="item. name" :to="productUrl(item)">
        ...
      </router-link>
   </div>
</template>
<script>
   data() {
     return {
        featuredItems: [...]
     }
   },
   methods: {
      productUrl(item) {
         store.state.selectedProdcut = item;
         return '/product/' + item.slug;
      }
   }
</script>

产品.vue

<template>
    <div class="text-2xl text-green-800">
        {{ currentItem.name }} <br />
        <img :src="currentItem.photo" alt="" />
        Product slug is: {{ $route.params.productSlug }}
    </div>
</template>

<script>
import store from "../../store";

export default {
    name: "Product",
    data() {
        return {
            currentItem: {}
        };
    },
    mounted() {
        this.currentItem = this.getItem;
    },
    computed: {
        getItem() {
            return store.state.selectedProdcut;
        }
    }
};
</script>

Store.js

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
    state: {
        selectedProdcut: {}
    },
    mutations: {},
    actions: {}
});

问题：

如果我尝试将当前项目保存在 store 内部productUrl方法中，该方法由 的:to属性调用router-link，控制台会说正在创建一个无限循环。但是，如果我@click在循环中添加一个属性，即

<div @click="storeSelectedProduct(item)" v-for="item in featuredItems" :key="item.id">
  <router-link to="productUrl(item)">...</router-link>
</div>

该项目已保存在商店中，我在下一页中将其取回。但这不是我想要的工作方式。我想单击router-link并将对象存储在 Store 中。我不希望容器div有一个@click单独的属性来处理存储！

Vuex Store使用更新的正确方法是什么<router-link>？

更新：
我没有将商店导出为app.js. 现在我可以访问this.$store以前无法访问的对象。

现在我可以使用以下方法<router-link :to="productUrl(item)">

methods: {
   productUrl(item) {
       this.$store.state.selectedProdcut = item;
       return "/product/" + item.slug;
   }
},

但是，现在的问题是最后一项只是添加到 Store 中，这是可以理解的。简而言之，我希望在单击 a 时更新商店<router-link>，但在导航之前，商店将使用item我正在传递的更新。这可能吗？

标签： vue.js