Pinia «возврат {myStore}» против «возврат myStore»

Я хочу использовать магазин Pinia в компоненте своего приложения Vue и не могу понять, почему магазин должен быть возвращен в { }? В чем разница между вернуть и вернуть фу?

import { usePiniaStore } from "../stores/mainStore";

export default {

  setup() {
    const piniaStore = usePiniaStore();

    return { piniaStore }; //  why isn't it 'return piniaStore' ?
  },
};
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Сравнение структур данных: Массивы и объекты в Javascript
Сравнение структур данных: Массивы и объекты в Javascript
Итак, вы изучили основы JavaScript и хотите перейти к изучению структур данных. Мотивация для изучения/понимания Структур данных может быть разной,...
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
0
0
38
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Это называется разрушением объектов. Если модуль возвращает несколько объектов, например {foo, goo, loo}, и вы хотите выбрать только один foo. вы можете использовать вернуть. Но если модуль возвращает только один объект foo, вы можете использовать вернуть фу. https://www.javascripttutorial.net/es6/javascript-object-destructuring/

Ну, код в вопросе содержит ровно нуль использования деструктуризации...

Michal Levý 09.04.2022 11:06

Нет, это не называется деструктурированием объектов. Он называется литералом объекта с сокращенными именами свойств.

jabaa 09.04.2022 11:31
Ответ принят как подходящий

На самом деле это не о Pinia, а о том, что Vue ожидает в качестве возвращаемого значения от функции setup(). Он ожидает объект. Если вы попытаетесь вернуть что-то еще, Vue выдаст ошибку.

// this will give you an error "setup() should return an object. Received: number"
<script>
  import { defineComponent } from 'vue'
  
  export default defineComponent({
    setup() {
      let myVariable = 10
      
      return myVariable
    }
  })
</script>

Причина этого в том, что Vue необходимо повторять свойства возвращаемого объекта (чтобы он знал как значение и, так и его имя), и создавать свойства с одинаковыми именами в экземпляре компонента (чтобы они были доступны в шаблоне). Это важно.

Код из вашего примера:

return { piniaStore }

на самом деле так же, как:


// creating new JS object 
const returnObject = {
  // first is property name
  // second is property value (from existing variable)
  piniaStore: piniaStore
}

return returnObject

... и это правильный код с точки зрения Vue

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

// you can do this BUT only inner properties of the "myObject" will be accessible in the template
<script>
  import { defineComponent } from 'vue'
  
  export default defineComponent({
    setup() {
      let myObject = {
        variableA: 10,
        variableB: "some string"
      }
      
      return myObject
    }
  })
</script>

Использование <div v-if="variableA"> будет работать. Использование <div v-if="myObject"> не будет.

Хранилища Pinia на самом деле являются объектами, поэтому возврат их непосредственно из установки (без включения их в другой объект), вероятно, является законным и будет работать. Но все вышеперечисленное остается в силе. Ваш шаблон не имеет доступа к piniaStore только к свойствам (состоянию или геттерам) и функциям (действиям), определенным в этом piniaStore магазине

Другие вопросы по теме