Не понимая Vuex

Question

У меня есть 2 ресурса, Projects и Pieces, так что у Projects есть много Pieces и маршрутизация к конкретному c Пьеса выглядит так:

.../projects/:project_id/pieces/:piece_id

в магазине Vuex Сохраняет currentProject с помощью вызова ax ios на основе этого. $ route.params.project_id.

Когда я перемещаюсь от .../projects/:project_id/ до .../projects/:project_id/pieces/:piece_id, currentProject определяется как ожидается.

Однако, если я обновлю sh страницу, currentProject -> undefined.

, вот мой vue файл для представления PieceShow:

<template>
  <div class="ui container">
    <div class="row">
      <div class="col-md-12">
        <div class="row">
          <h3 class="mb-2"> 
            <router-link :to="{name: 'ProjectShow', params: {project_id: currentProject.id}}">{{currentProject.name}}</router-link> 
            - {{ piece.title }}
            <router-link 
              :to="{ name: 'PieceEdit' }" 
              class="ml-5" 
              data-toggle="tooltip" 
              title="Edit this piece"
              v-show="isPieceOwner"
            >
              <i class="fas fa-edit"></i>
            </router-link>
          </h3>
        </div>
        <div class="fixed-height-600 bg-white p-3" v-html="`${piece.body}`"></div>
      </div>
    </div>
  </div>
</template>

<script>
import PiecesService from '@/services/PiecesService'
export default {
  name: 'PieceShow',
  components: {
  },
  data () {
    return {
      piece: {}
    }
  },
  computed: {
    // get current user and check to see if they belong to this piece
    isPieceOwner() {
      return this.piece.users_id === this.$store.state.user.id
    },
    currentUser() {
      return this.$store.state.user
    },
    currentProject() {
      return this.$store.state.currentProject
    }
  },
  async mounted () {
    await this.getPieceById ();
    // if (process.env.NODE_ENV === 'production') {
    //   window.analytics.page('Piece Page Visited', {
    //     user: this.$store.getters.user.username,
    //     piece: this.piece.title
    //   }) // from segment.io docs
    //   window.analytics.track('Piece Viewed', {
    //     title: this.piece.title,
    //     user: this.currentUser.username
    //   });
    // }
  },
  methods: {
    async getPieceById () {
      const response = await PiecesService.getPieceById({
        id: this.$route.params.piece_id
      })
      console.log('In PieceShow, this piece (retrieved from Express) is: ', response.data );
      this.piece = response.data;
    },
    async convert2Docx () {
      const response = await PiecesService.convert2Docx({
        id: this.$route.params.piece_id
      })
      console.log('this is the response object: ', response)
    }
  }
}
</script>

Я установил currentProject в ProjectShow компонент, когда мы извлекаем его для вида, подобного этому:

this.$store.commit("setCurrentProject", this.project);

Если я не сниму его, почему я не могу тогда вызвать это. $ store.state.currentProject, не имея установить его снова, когда я доберусь до представления PieceShow?

Answer 1

Хранилище Vuex сбрасывается в исходное состояние при обновлении sh страницы, подобно тому, как обычная страница сбрасывается в исходное состояние при обновлении sh. Чтобы сохранить (часть) магазина Vuex, вам нужно использовать плагин для этого. Вы можете использовать, например, vuex-persistedstate .

. Хотя это может помочь, если вы обновите sh, очевидно, что вы ничего не сделаете, если, например, щелкните ссылку на кусок в другом проекте.

Другое дело, что когда вы переопределите sh, и у вас есть маршрут в строке URL, который указывает на маршрут PieceShow, маршрутизатор Vue не будет посещать ProjectShow вообще.

---

Вы всегда должны строить свои взгляды, зная, что кто-то, возможно, не посещал какой-либо другой маршрут. Тем не менее, есть несколько способов, которыми вы можете обойти, просто продублировав код для извлечения проекта.

Вы можете переместить код для извлечения вашего проекта в действие Vuex. Если проект уже загружен, просто вернитесь рано, в противном случае получите проект. Защитите себя от несуществования, используя v-if в вашем компоненте, чтобы он не отображался до загрузки проекта. В этом случае вы даже можете показать загрузчик на основе переменной, которую вы поместили в хранилище vuex.

Другой способ - это вложить ваши маршруты так, что у вас есть маршрут для /projects/:projectId и один для подчиненный маршрут pieces/:pieceId. В представлении для /projects/:projectId вы можете сделать что-то вроде ниже. В вашем маршрутизаторе. js вы можете определить атрибут children с подмартом, который будет смонтирован в представлении маршрутизатора для /projects/:projectId.

<template>
  <router-view v-if="currentProject" />
</template>

<script>
export default {
  computed: {
    currentProject() {
      return this.$store.state.currentProject
    }
  },

  created () {
    const response = await PiecesService.getPieceById({
      id: this.$route.params.piece_id
    })
    const project = response.data

    this.$store.commit("setCurrentProject", project);
  }
}
</script>

.