Back

Using Pinia Store with Vue3 User is Never Logged In?

  • 0
  • Web
Binyamin
19 Apr, 2023, 16:26

Nice

TL;DR
User is experiencing an issue using Pinia Store with Vue3. They have a code snippet that initializes variables using local storage, but it is not working as expected. Another user suggests replacing the code snippet with a simplified version. The issue seems to be related to setting the local storage item for `isConnected`. The user shares a link to an example on GitHub for reference. They also mention that `CheckConnection` should be called once in the `main.js` file. The discussion continues with troubleshooting suggestions and recommendations for using global manual state instead of Pinia for storing user data. The user mentions encountering a 500 error and asks about
ZachHandley
19 Apr, 2023, 16:26

Is there an updated guide on setting up Appwrite for the latest version?

Binyamin
19 Apr, 2023, 16:26

Sure It's very easy

Binyamin
19 Apr, 2023, 16:27
ZachHandley
19 Apr, 2023, 16:27

I am still new to Firebase/Appwrite format and the documentation isn't that clear tbh

ZachHandley
19 Apr, 2023, 16:27

in terms of what indexes do, functions, etc. vs a traditional database

Binyamin
19 Apr, 2023, 16:27

Yes.. sometime it's difficult to find the right one

ZachHandley
19 Apr, 2023, 16:27

so what permissions do I need to set?

Binyamin
19 Apr, 2023, 16:27

It can be more complex at the beginning from my POV it worth it

Binyamin
19 Apr, 2023, 16:29

For what part? I don't think you need in your use case

What would be better is that you transfer the CheckMemberStatus part of creating the document to a function And block all writing to the collection.

But that's for later

ZachHandley
19 Apr, 2023, 16:29

I added the role Users with permissions create read write update delete

ZachHandley
19 Apr, 2023, 16:29

it still is giving me an error

Binyamin
19 Apr, 2023, 16:31

You still get the 500?

ZachHandley
19 Apr, 2023, 16:32

no but still

TypeScript
Logging in... users.ts:48:16
Logging in...
Account: [object Object] users.ts:52:20
Logging in...
Account: [object Object] users.ts:52:20
AccountPage mounted AccountPage.vue:107:10
Something went wrong: Not connected
Binyamin
19 Apr, 2023, 16:34

BTW: When I used Appwrite + Vue + Pinia, I've stored the user in a global manual state not in Pinia, I don't remember why, but back in the time it's seems simpler to me

Binyamin
19 Apr, 2023, 16:36

For your case try to extract the CheckMemberStatus function and test it on it's own.

Binyamin
19 Apr, 2023, 16:37

One last idea

Where you actually store this item?

TypeScript
const isConnectedStorage = localStorage.getItem("isConnected");

What I mean how do you make the value of the isConnected computer property true?

ZachHandley
19 Apr, 2023, 16:38
TypeScript
async function CheckConnection() {
        if (account.value == null) {
            isConnected.value = false;
        }
        try {
            const session = await account.value.get();
            if (session) {
                isConnected.value = true;
                accountInfo.value = session;
                localStorage.setItem("isConnected", JSON.stringify(accountInfo.value));
            }
        } catch (error) {
            console.log("Not connected");
            isConnected.value = false;
        }
    }
Hearstgo
19 Apr, 2023, 17:01

Hey, so the CheckConnection is supposed to be called once first in the main.js file of your app if I remember well πŸ€”

Hearstgo
19 Apr, 2023, 17:03

No my bad it's in App.vue

you can check the example here : https://github.com/Heargo/ressources-panel/blob/main/src/App.vue

Hearstgo
19 Apr, 2023, 17:04

As it's code I've written there is no documentation on it haha so don't hesitate to ping me if you need help

ZachHandley
25 Apr, 2023, 15:52

@Hearstgo quick question, I've been using your code but when exactly do you set the localStorage item for isConnected or AutoSave? in store?

Hearstgo
25 Apr, 2023, 17:11

very good question haha ! If I remember well, I didn't clean up the code properly πŸ˜… since appwrite already using localstorage I only need to init the variables with the checkConnection() when starting the app and then after an attempt to log

Hearstgo
25 Apr, 2023, 17:12

You can replace

TypeScript
IsConnected:JSON.parse(localStorage.getItem('isConnected')) || false,       autoSave:JSON.parse(localStorage.getItem('autoSave')) || false,

by this and it should still work

TypeScript
IsConnected:false,
autoSave: false,
ZachHandley
25 Apr, 2023, 20:52

gotcha! πŸ™‚

Reply

Reply to this thread by joining our Discord

Reply on Discord

Need support?

Join our Discord

Get community support by joining our Discord server.

Join Discord

Get premium support

Join Appwrite Pro and get email support from our team.

Learn more