pinia 状态管理

https://uniapp.dcloud.net.cn/tutorial/vue3-pinia.html

// stores/user.js
import {
    defineStore
} from 'pinia';

// @see : https://pinia.vuejs.org/zh/core-concepts/
// 你可以任意命名 `defineStore()` 的返回值，但最好使用 store 的名字，同时以 `use` 开头且以 `Store` 结尾。
// (比如 `useUserStore`，`useCartStore`，`useProductStore`)
// 第一个参数是你的应用中 Store 的唯一 ID。
export const useUserStore = defineStore('user', {
    state: () => {
        return {
            //是否登录 项目中改为真实登录信息判断，如token
            isLogin: uni.getStorageSync("api_token") ? true : false,
            //登录用户名
            nickname: "请登录xx",
            userinfo: uni.getStorageSync("user_info") || {},
            count : 0,
            ...
        };
    },
    // getters 内函数的默认第一个参数为 state
    getters: {
        double: (state) => state.count * 2,
        currentTime: (state) => {
            return '2024-06-21 17:44:14';
        },
        // 向 getters 传值 `getUserById(2)`
        getUserById: (state) => {
          //  return this.double + 1
          return (userId) => state.users.find((user) => user.id === userId)
        },
    },
    // Action 相当于组件中的 method
    actions: {
        increment() {
            this.count++;
        },
        login(a) {
            console.log('login', a)
        },
    },
});

import { mapState, mapStores, mapActions, mapGetters } from 'pinia'
import { useUserStore } from '@/stores/user'

 export default {
    computed: {
        // 其他计算属性
        // 允许访问 this.userStore | id 为 "user" 的 store | eg: this.userStore.login(userInfo), this.userStore.nickname
        ...mapStores(useUserStore),
        // 允许读取 this.userinfo,this.nickname,this.currentTime // currentTime 是 useUserStore 里面的 getters
        ...mapState(useUserStore, ['userinfo', 'nickname', 'currentTime']),
        // 允许读取 useUserStore 里面 getters 的方法  | eg:this.currentTime
        ...mapGetters(useUserStore, ['currentTime'])
    },
    methods: {
        // 允许读取 this.login()
        ...mapActions(useUserStore, ['login']),
    }
}