vue下一代状态管理Pinia.js 保证你看的明明白白！(下）

//src/store/user.ts 文件
import { defineStore } from 'pinia'
export const useUserStore = defineStore({
    id: 'userkey', // id必填，且需要唯一
    // state是存放数据的  
    state: () => {
        return {
            name: '于途',
            likelist:[],
            sex:'男',
            work:'写代码',
            heigt:'1.70cm',
            age:26,
        }
    },
    // actions 可以修改state中的值，这里面提供方法
    actions:{
        // 修改name中的数据
        updataName(name:string){
            this.name=name
        },
    },
    // Getter 完全等同于 Store 状态的计算值
    getters:{
        // 将姓名进行更改
        getName: (state) => {
            return state.name + 'hahha~!'
        }
    }
})
//使用的页面.vue
<template>
    <div class="pinia">
       <h2> 学习pinia </h2>
        <div>姓名：{{ asName }}</div>
        <div>性别：{{ mysex }}</div>
        <div>工作：{{ work }}</div>
        <div>身高：{{ heigt }}</div>
        <div>身高：{{ age }}</div>
        <!-- 这里就直接使用了getters中的方法  -->
          姓名：{{ userStore.getName }}
        <el-button type="primary" @click="changeHander">修改name</el-button>
    </div>
</template>
<script setup lang='ts'>
import { storeToRefs } from 'pinia'
import { useUserStore } from '../../store/user'
const userStore = useUserStore()
// asName 和 mysex 是我取的别名
const { name : asName ,sex:mysex,
   work, heigt,age 
} = storeToRefs(userStore)
const changeHander=()=>{
    userStore.updataName('小玉兔')
}
</script>

//src/store/user.ts 文件
import { defineStore } from 'pinia'
// 引入接口
import { getUser } from "../https/api";
export const useUserStore = defineStore({
    id: 'userkey', // id必填，且需要唯一
    // state是存放数据的  
    state: () => {
        return {
            name: '于途',
            likelist:[],
        }
    },
    // actions 可以修改state中的值，这里面提供方法
    actions:{
        // 修改name中的数据 同步
        updataName(name:string){
            this.name=name
        },
        // 异步-获取远端的数据
        loadUserList(){
            getUser({}).then(res=>{
                this.likelist = res
            })
        }
        // 使用await和async 第二种方法
        // async loadUserList(){
        //     const list = await getUser({})
        //     console.log('list',list)
        //     this.likelist = list
        // }
    },
})
使用的页面
<template>
    <div class="pinia">
       <h2> 学习pinia </h2>
         数据 {{ userStore.likelist}}
        <el-button type="primary" @click="changeHander">获取远端数据</el-button>
    </div>
</template>
<script setup lang='ts'>
import { storeToRefs } from 'pinia'
import { useUserStore } from '../../store/user'
const userStore = useUserStore()
const changeHander=()=>{
    // 异步调用
    userStore.loadUserList() // 加载所有数据
}

//src/store/admin.ts 文件
import { defineStore } from 'pinia'
// 引入user模块
import { useUserStore } from './user'
export const adminUserStore = defineStore({
    id: 'adminkey', 
    actions:{
      // 通过引入的useUserStore模块，然后去触发它里面对应的方法。
       editUserModuleValue(name:string){
           //  userStore可以看见整个user模块中的数据和方法
           let userStore=useUserStore()
           console.log('userStore',userStore)
           userStore.updataName(name)
       }
    },
})

//src/store/user.ts 文件
import { defineStore } from 'pinia'
// 引入接口
export const useUserStore = defineStore({
    id: 'userkey', // id必填，且需要唯一
    // state是存放数据的  
    state: () => {
        return {
            name: '于途',
            likelist:[],
            sex:'男',
            work:'写代码',
            heigt:'1.70cm'
        }
    },
    actions:{
        // 修改name中的数据 同步
        updataName(name:string){
            this.name=name
        },
    },
})

<template>
    <div class="pinia">
       <h2> 学习pinia </h2>
         姓名 {{ userStore.name}}
        <el-button type="primary" @click="changeHander">该变值</el-button>
    </div>
</template>
<script setup lang='ts'>
import { storeToRefs } from 'pinia'
// 引入admin模块
import { adminUserStore } from '../../store/admin'
// 引入user模块
import { useUserStore } from '../../store/user'
const adminStore = adminUserStore()
const userStore = useUserStore()
// dmin模块需要去修改user模块中的数据
const changeHander=()=>{
    adminStore.editUserModuleValue('数据数据')
}
</script>