Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Migrate from feathers-vuex #99

Open
devops724 opened this issue Dec 14, 2022 · 5 comments
Open

Migrate from feathers-vuex #99

devops724 opened this issue Dec 14, 2022 · 5 comments
Labels
documentation Improvements or additions to documentation question Further information is requested

Comments

@devops724
Copy link

devops724 commented Dec 14, 2022

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
Copy link
Owner

marshallswain commented Dec 21, 2022

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>

@marshallswain marshallswain added the question Further information is requested label Dec 21, 2022
@devops724
Copy link
Author

devops724 commented Dec 21, 2022

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
Copy link
Owner

@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
Copy link
Owner

@marshallswain
Copy link
Owner

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.

@marshallswain marshallswain added the documentation Improvements or additions to documentation label Jan 3, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
documentation Improvements or additions to documentation question Further information is requested
Projects
None yet
Development

No branches or pull requests

2 participants