Как организовать детальную страницу в каталоге с SPA + VueRouter + Vuex?

Question

[danilr]

Есть страница с каталогом, все данные для элемента берутся из массива.
Есть роуты для детальной и каталога. Для детальной роут у меня динамический.
При клике на элемент - я сохраняю текущий элемент в store vuex и перехожу по роуту на детальной по динамическому пути.
Проблемы в следующем:
1) После перехода на детальную страницу - если обновить, то возникает ошибка, так как в store - текущий элемент не записан.
2) Если вручную прописать роут в строке браузера, то он не перейдет на нужный мне элемент.
3) Если я задам дефолтный текущий элемент (чтобы по первому пункту не было ошибки), то к странице не применяются стили почему-то.
Как надо организовать роутинг каталога + детальной элемента каталога, чтобы все правильно работало?

const meatFood = [
  {
    title: 'Говядина тушеная',
    value: 'cow',
    imgDetail: '/img/catalog/cow.png',
    weight: 10,
    cow: true,
    pig: false,
    bird: false,
  },
  {
    title: 'Говядина вареная',
    value: 'krot',
    imgDetail: '/img/catalog/cow.png',
    weight: 300,
    cow: true,
    pig: false,
  },
const store = new Vuex.Store({
    state:{ 
        meatFood: meatFood,
        currentFood: meatFood[0]
    },
    mutations:{
        setCurrentFood(state, food){
            state.currentFood = food;
            console.log('state.currentFood: ', state.currentFood);
        }
        
    }
});

const router = new VueRouter({
  mode: 'history',
  routes:[
      {
          path: '/',
          name: 'main',
          component: MainPage
      },
      {   
          path: '/catalog',
          name: 'catalog',
          component: Catalog
      },
      {   
          path: '/catalog/:code',
          name: 'detail',
          component: Detail
      },
      {   
          path: '*',
          name: 'notFound',
          component: MainPage
      }
  ]
})

А здесь я вешаю vue-router, чуть ниже метод:

<router-link :to="{name: 'detail', params: {code: food.value}}">
            <div @click="setCurrentFood(food)" class="box-food">
                <p>{{food.title}}</p>
            </div>
          </router-link>

data(){
    return{
      meatFood: this.$store.state.meatFood
    }
  },
  methods: {
    setCurrentFood(food){
      this.$store.commit('setCurrentFood', food);
    }
  },

Answer 1

[0xD34F]

При клике на элемент - я сохраняю текущий элемент в store vuex и перехожу по роуту...

Вот и корень ваших проблем. Не надо ничего сохранять при клике. Просто переходите. А компонент, отображающий детальную информацию - пусть он сам разбирается, что и как. Получает в качестве параметра идентификатор объекта, который должен отобразить, и запрашивает нужные данные. Ну и watch на идентификатор - чтобы при его смене данные также обновлялись.

UPD. Если все данные на клиенте уже есть, то вообще ничего не надо, кроме одного вычисляемого свойства в Detail, где по id (или что там у вас) будет из vuex извлекаться нужный объект.

Comments

[danilr]

Не совсем понятно как компонент для детальной должен понять какой отрисовывать, буду крайне благодарен за более подробное описание, включая действия с watch

[0xD34F]

Читайте документацию.

[danilr]

0xD34F,

computed:{
    currentFood(){
     return this.$store.state.meatFood[i] 
    }
    
  },
  watch: {
    '$route' (to, from) {
      // обрабатываем изменение параметров маршрута...
      
    },
  },

Это в компоненте detail. Я не понимаю как мне получить нужный индекс для поиска необходимого объекта, кроме как в компоненте с каталогом при клике в store записывать его, а тут доставать.
Но тогда это равносильно моему изначальному записыванию объекта в store.
Что в watch написать нужно?

[0xD34F]

danilr, watch тут не нужен.

currentFood() {
  return this.$store.state.meatFood.find(n => this.$route.params.code === n.value)
}

[danilr]

0xD34F, Вот теперь большое спасибо!)