pinia: определение геттеров и действий в функциональном обозначении

Question

Я нахожусь в процессе реализации хранилища pinia в нотации функций, и мне интересно, как объявить геттеры и действия.

Реализованы ли они как простые функции без различия?

      import { defineStore } from 'pinia'
import HttpService from '../services/BaseHttpService';
import { ref } from 'vue'
import { User } from '../models/user.model';

const httpService = new HttpService('/users');
    
export const useUserStore = defineStore('user', () => {
    const authedUser = ref(new User())
    const users = ref<User[]>([])

    function authed() {
        return typeof authedUser.value['@id'] === "string";
    }

    function login(data: { email: string, password: string }) {
        const http = new HttpService('/login');
        return http.post(data).then((response) => {
            authedUser.value = response
            users.value = [...users.value, response]
        })
    }

    function getter() {
        return users.value;
    }

    function action(id: number) {
        httpService.get(id).then((response) => {
            users.value = [...users.value, response]
        })
    }

    return {authedUser, users, authed, login}
})

Answer 1

Как уже было сказано, вы можете использоватьcomputedпеременная для получения геттеров и сеттеров. Я дам решение на TypeScript, которое должно работать в Javascript, если вы удалите аннотации типов. Я нашел свое первоначальное решение по этой проблеме, комментарий, который немного выше гласит :

Интерфейс для записи:

       export declare interface WritableComputedOptions<T> {
   get: ComputedGetter<T>;
   set: ComputedSetter<T>;
}

это выглядело бы примерно так (я не знал, как работает ваш класс User, поэтому, возможно, он немного сломан):

      import { defineStore } from 'pinia'
import HttpService from '../services/BaseHttpService';
import { ref, computed } from 'vue'
import { User } from '../models/user.model';

const httpService = new HttpService('/users');
    
export const useUserStore = defineStore('user', () => {
    const users = ref<User[]>([])
    const authedUser = computed<User | null>({
        get: () => {
             // find the (single) user that is logged in.
             let authedUsers = users.value.filter((user: User) => {user.isLoggedIn()})
             // return the user that is logged in and null otherwise
             return authedUsers.length === 1 ? authedUsers[0] : null
        },
        set: (user: User) => {
             //check if there is a logged in user(s)
             let authedUsers = users.value.filter((user) => {user.isLoggedIn()})
             if (authedUsers.length >== 0) {
                 authedUsers.forEach((authedUser: User) => {authedUser.logOut()}
             }
             if (users.value.includes(user) === false){
                 users.value.push(user)
             }
             user.logIn()
      }
        }
    })

    function login(data: { email: string, password: string }) {
        const http = new HttpService('/login');
        return http.post(data).then((response: User) => {
            authedUser.value = response
            // we already do this in the setter function
            // users.value = [...users.value, response]
        })
    }

    return {authedUser, users, login}
})

Не уверен, что мутируетusersпри настройкеauthedUserхотя это антипаттерн...