皮尼亚 'return {myStore}' vs 'return myStore'

Question

我想在我的 Vue 应用程序的组件中使用 Pinia 商店，但我不明白为什么必须在 { } 中 returned 商店？ return {foo} 和 return foo 有什么区别？

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

export default {

  setup() {
    const piniaStore = usePiniaStore();

    return { piniaStore }; //  why isn't it 'return piniaStore' ?
  },
};

Answer 1

这叫做对象解构。如果一个模块 returning 多个对象，即 {foo, goo, loo} 而你只想选择一个 foo。你可以使用 return {foo}。但是如果模块只returning 一个对象foo，你可以使用return foo。 https://www.javascripttutorial.net/es6/javascript-object-destructuring/

Answer 2

这真的不是关于 Pinia，而是关于 Vue 期望 setup() 函数的 return 值。它需要一个对象。如果你尝试 return 其他东西，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 需要迭代 returned 对象的属性（因此它知道值和它的名称）并创建具有相同属性的属性组件实例上的名称（因此它们可以在模板中访问）。这很重要。

您示例中的代码：

return { piniaStore }

实际上等同于：


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

return returnObject

...从 Vue 的角度来看，这是一个有效的代码

要记住的重要一点是只有 returned 对象的属性可以从模板访问

// 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 存储实际上是对象，因此 return 直接从设置中获取它们（不将它们包装在另一个对象中）可能是合法的并且可以工作。但以上仍然适用。您的模板无法访问 piniaStore 只能访问在 piniaStore 商店

上定义的属性（状态或获取器）和函数（操作）

皮尼亚 'return {myStore}' vs 'return myStore'

Pinia 'return {myStore}' vs 'return myStore'

javascript

vue.js

vue-composition-api

pinia