vue3项目使用pinia状态管理器的使用

yarn add pinia
# 或使用npm
npm install pinia

import { createPinia } from "pinia"

// 创建 Pinia 实例
const pinia  = createPinia()

// 导出 Pinia 实例以便将其与应用程序实例关联
export default pinia

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router/router'
import store from './store/index'

createApp(App)
    .use(router)
    .use(store)
    .mount('#app')

import { defineStore } from "pinia"

export const useUserStore = defineStore({
    //id 是为了更好地区分模块
    id: 'user',
    state: () => ({
        name: 'Tony',
        age: 18,
        count: 0
    }),
    getters: {
        doubleCount: (state) => state.count * 2,
    },
    actions: {
        // 定义操作或异步请求
        increment() {
            // 这里访问state的数据不再是state.XXX，而是通过this
            this.count++
        }
    }
})

<template>
  <div>
    <h3>我是测试pinia状态存储的组件，我有一个子组件</h3>
    <div>userStore里的state数据：</div>
    <span>姓名： {{ name }}</span>   <span>年龄： {{ age }}</span>
    <div><button @click="handleIncre">修改count:</button>count: {{ count }}</div>
    <!-- 直接调用getters的方法 -->
    <div> Double count is: {{ doubleCount }}</div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import TestChild1 from './component/TestChild1.vue'
import { useUserStore } from '../../store/user';
import { storeToRefs } from 'pinia'

const userStore = useUserStore()
// 通过storeToRefs包裹，解构出来的属性/方法才有响应式
const { name, age, count,  doubleCount} = storeToRefs(userStore)
// console.log('userStore:', userStore.name, userStore.age, userStore.count)
// console.log(name.value, age.value, count.value);

// 调用store的actions的increment方法
const handleIncre = () => {
    userStore.increment()
}

</script>

// 模拟异步登录获取用户信息
const loginUser = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve({
                name: 'Tony',
                age: 18
            })
        }, 2000)
    })
}

export default {
    loginUser
}

import { defineStore } from "pinia"
import API from '../api/index'

export const useUserStore = defineStore({
    //id 是为了更好地区分模块
    id: 'user',
    state: () => ({
        name: 'Tony',
        age: 18,
        count: 0,
        userInfo: {}
    }),
    getters: {
        doubleCount: (state) => state.count * 2,
    },
    actions: {
        // 定义操作或异步请求
        increment() {
            // 这里访问state的数据不再是state.XXX，而是通过this
            this.count++
        },
        // 在actions中异步获取loginUser的数据
        async getUserInfo() {
            this.userInfo = await API.loginUser()
            console.log('user-info', this.userInfo);
        }
    }
})

<!-- 点击---异步登录获取userInfo -->
    <button @click="getUser">异步登录获取userInfo</button>
    <div>userInfo: {{ userInfo }}</div>

// 调用store的actions的getUserInfo方法异步获取用户登录信息
const getUser = () => {
  userStore.getUserInfo()
}