Блог

Я немного новичок в Vue / VueX, поэтому наверняка должно быть что-то, что я не понимаю правильно.

У меня есть очень простой компонент:

• Он извлекает коллекцию элементов из VueX mapState (in computed() )
• Из которого я извлекаю один элемент ( mounted() в данный момент)
• Затем мне нужно вставить этот элемент в шаблон, но я не могу понять это

Насколько я понимаю, мы можем передавать данные в шаблон только из setup data методов or, но не из mounted , created хуков и т. Д. Правильно ли это звучит?

В следующем примере кода, как я могу отправить item объект, который я получаю из items in mounted() , в шаблон?

Я не могу сделать все setup это, поскольку мой computed() items объект VueX там еще недоступен. Есть предложения о том, как правильно достичь этой простой цели?

 <template>
  <p>ID: {{ id }}</p>
  <p>Name:: {{ item.name }}</p>
</template>

<script lang="ts">
import { useRoute } from 'vue-router'
import { ref, computed, watch } from 'vue'
import { mapState, mapActions } from 'vuex'

export default {
  // fetching items from vuex (works)
  computed: mapState({
    items: (state: any) => state.items
  }),
  setup() {
    const route = useRoute()
    // parsing ID from route params (works)
    const id = ref(route.params.id || 'Plants')
    return {
      id,
      // this seems to be the proper way of pushing data to template:
      // item: { name: 'this works from here' }
    }
  },
  mounted() {
    // fetch item by id (works)
    const item: Plant = this.items.find(i => i.id === this.id)

    // TODO: I need to push this to the template but I cannot from here
    return { item }
  }
}
</script>
 

Лучший способ для этого случая определить другое вычисляемое свойство, например :

 export default {
 
  computed:{ ...mapState({//should spread the mapState in order to add other properties
    items: (state: any) => state.items
  }),
  item(){
    const _item: Plant = this.items.find(i => i.id === this.id)
    return  _item;
   }

 },
  setup() {
    const route = useRoute()
    // parsing ID from route params (works)
    const id = ref(route.params.id || 'Plants')
    return {
      id,
     
    }
  },

}
 

или используйте только api опций :

 export default {
 
  computed:{ ...mapState({//should spread the mapState in order to add other properties
    items: (state: any) => state.items
  }),
  item(){
    let id=this.$route.params.id || 'Plants'
    const _item: Plant = this.items.find(i => i.id === id)
    return  _item;
   }

 },

}
 

и

 <template>
  <p>ID: {{ $route.params.id }}</p>
  <p>Name:: {{ item.name }}</p>
</template>