How to use an array defined in Pinia store?

Question

I created a store in order to use the User resource, and that store has an array of roles. What I am trying to do is to search for a specific role in that array. I tried to use the Array functions, but it does not work with PropType<T[]>.

import router from "@/router";
import axios from 'axios';
import { defineStore } from "pinia";
import { PropType } from "vue";
import { ApplicationConstants } from '../utils/Constants';

type Role = {
    name: string;
}

export const useUserStore = defineStore('user', {
    state: () => ({
        currentUserId: Number,
        currentUserUsername: String,
        currentUserRoles: Array as PropType<Role[]>,
        isLoggedIn: false
    }),
    getters: {
        getCurrentUserId: (state) => state.currentUserId,
        getCurrentUsername: (state) => state.currentUserUsername,
        getCurrentUserRoles: (state) => state.currentUserRoles,
        isUserLoggedIn: (state) => state.isLoggedIn,
        // hasCurrentUserRole: (state) => { return (role: String | Role) ????} 
    },
    actions: {
        logIn(username: string, password: string) {
            const authDTO = {
                "username" : username,
                "password" : password
                }
                const loginResponse = axios({
                    method: 'post',
                    url: ApplicationConstants.API_LOGIN_URL,
                    data: authDTO
                }).then((loginResponse) => {
                    /** Set JWT access token in LocalStorage. */
                    const token = loginResponse.headers["access-token"];
                    localStorage.setItem("accessToken", token);
                    /** Set current user credentials. */
                    this.currentUserId = loginResponse.data.id;
                    this.currentUserUsername = loginResponse.data.username;
                    this.currentUserRoles = loginResponse.data.roles;
                    this.isLoggedIn = true;
                    /** Go to Home page. */
                    console.log("inside login in userstore");
                    router.push("/");
                }).catch((error) => {
                    
                });
        },
        logOut() {
            this.$reset();
            this.isLoggedIn = false;
            router.push("/login");
        },
        containsRole (roleName: String | Role)  {
            // how??
        }
    }
});

I am using Vue3 with Composition API, and Typescript.

Answer 1

Well you return an object, wich your values have types instead of actual values. You can try this by setting default values

state: () => ({
    currentUserId: 0,
    currentUserUsername: "",
    currentUserRoles: [] as Role[],
    isLoggedIn: false
}),

Or you can use an interface with null default values:

state: (): StoreStateI => ({
    currentUserId: null,
    currentUserUsername: null,
    currentUserRoles: [],
    isLoggedIn: false
}),

interface StoreStateI {
   currentUserId: null | number
   currentUserUsername: null | string
   currentUserRoles: Role[]
   isLoggedIn: boolean
}