pinia不同文件数据在封装组件中的使用

目录

前言

1. 创建store.ts文件

2. 在需要使用的视图中引用

 3. 向组件中传输数据

二、在组件中使用

1. 引入数据并使用

2. 使用传出的数据

总结

---

前言

在封装的table组件中使用pinia不同文件的数据，从而get到不同的列表并且渲染数据（page-table.vue为componments文件夹中的组件），通过props达到效果。

---

一、views文件夹中的视图

1. 创建store.ts文件

import { UseSystemStore } from '@/store/main/system/systemStore'
const store = UseSystemStore()
export default store

2. 在需要使用的视图中引用

<script lang="ts">
import { defineComponent } from 'vue'
import store from '../store'
export default defineComponent({
setup() {
    return {
      store
    }
  }
})

 3. 向组件中传输数据

<PageTable :store="store" />      //:后的store为自定义的props变量名

二、在组件中使用

1. 引入数据并使用

<script lang="ts">
import { defineComponent, ref } from 'vue'
export default defineComponent({
props: {
    store: {
      type: Object,
      require: true
    }
  },
  setup(props) {
    const stores = ref({ ...props.store })
    stores.value?.getPageList(pageInfo)
    return {
      stores
    }
  }
})

• 通过解构到新对象对props中接收的数据进行浅拷贝（不建议直接使用props数据，会破坏单向数据原则）
• 通过.value对ref响应数据进行操作，由于getPageList函数不一定存在，所以需加?表示可选，可以不一定存在（该函数为pinia中的自定义函数）

2. 使用传出的数据

<lzjTable :listData="stores.pageList(props.pageName)" v-bind="tableConfig">
</lzjTable>

可以在上方使用传出的stores获取数据

---

总结

此做法仍有些许弊端，在使用stores时必须保证每个文件中获取同类型数据的方法名相同