Migrate from feathers-vuex

[devops724]

Hi There I have a project on vue2 feathers-vuex code want to migrate it to vue3 and feathers-pinia I followed guide but can't find a way to implement it on feathers-pinia

mounted(){
     const { User } = this.$FeathersVuex.api;
     User.on("created",(user)=>{
        this.load_data();
     })
},
methods:{
     load_data(){
          const { User } = this.$FeathersVuex.api;
           User.find({query:this.pagination,}).then((res)=>{
                this.users=res.data
            })
      },
}

is there any guide to help me in this case? also this line ...mapState("groups", { areGroupsLoading: "isFindPending" }),

[marshallswain]

There's no need to do the manual assigning dance this.users = res.data is a pattern that should almost never be used. You can use useFind to accomplish the same thing.

<script setup lang="ts">
import { defineProps, onMounted } from 'vue'
const User = useUserModel() // auto-imported in Nuxt and Vite projects

// an object or TS interface would be better, but I don't know your schema
const props = defineProps(['pagination']) 

// users will automatically populate with data once the query returns.
const { data: users } = User.useFind({ query: { ...props.pagination } })
</script>

[devops724]

thanks marshallswain so useFind automatically query to server and have latest version of data on data change? what about this? ...mapState("groups", { areGroupsLoading: "isFindPending" }), i want show loading icon on areGroupsLoading is true, this mean when we quering and send sevrver request, to show data are on the way

[marshallswain]

@devops724 you'll want to take a look at everything available to you inside of the object returned from useFind:

// lots of utils available inside of "useFindData"
const useFindData = userStore.useFind({ query: props.pagination })
const { data: users } = useFindData

[marshallswain]

Here's the list of what's available: https://github.com/marshallswain/feathers-pinia/blob/v1-use-store/src/use-find.ts#L306-L348

You'll need the pre-release docs: https://v1.feathers-pinia.pages.dev/guide/use-find.html.

[marshallswain]

Since useFind has its own request state tracking, you don't have to go looking for the one in the store, although that would still work.