vue3+pinia 的 actions

使用
<template>

import { defineStore } from 'pinia'


// 用到其他store的信息
import  useCounter  from './counter'

const useUser = defineStore('user',{
    state:()=>({
        name:'吴宇腾',
        age:29,
        level:1,
        firends:[
            {id:11,name:'why1'},
            {id:12,name:'why2'},
            {id:13,name:'why3'},
        ],
        // 网络请求
        banners: [],
        recommends: []
    }),
    getters:{
        // 1.基本使用
        // 第一个参数 : state
        ageAdd(state){
            return `姓名 : ${state.name} , 年龄 : ${state.age} , 等级 :${state.level}`
        },
        // 2.一个getter引入另外一个getter 通过this来引入
        ageAddOne(){
            return `${this.ageAdd} 加上第二句话`
        },
        // 3.getters支持返回一个函数
        chaFirend(state){
            return function(id){
                return state.firends.find(v=>{
                    return v.id == id
                })
            }
        },
        // 4.getters用到别的store的数据
        showMeaage(){
            // 获取到另外store的信息
            const CounterStore = useCounter()

            return `CounterStore:${CounterStore.count} - ${this.ageAddOne}`
        }
    },
    // this可以访问整个实例,跟getters的this一样
    // 可以传递参数
    actions:{
        levelBtn(){
            this.level ++
        },
        // 发送请求
        async fetchHomeMultidata() {
            const res = await fetch("http://123.207.32.32:8000/home/multidata")
            const data = await res.json()
            console.log(data)
            this.banners = data.data.banner.list
            this.recommends = data.data.recommend.list
        }
    }
})

export default useUser

 

  <div class="id">
    <h3>姓名: {{ userStore.name }}</h3>
    <h3>年龄: {{ userStore.age }}</h3>
    <h3>等级: {{ userStore.level }}</h3>

    <h3>简化版姓名: {{ name }}</h3>
    <h3>简化版年龄: {{ age }}</h3>
    <h3>简化版等级: {{ level }}</h3>

    <button @click="changge">修改信息</button>
    <button @click="chang">简易版修改信息</button>
    <button @click="reset">重置信息</button>

    <h3>语句 : {{userStore.ageAdd}}</h3>
    <h3>语句 : {{userStore.ageAddOne}}</h3>

    <h3>查找id : {{ userStore.chaFirend(13) }}</h3>
    <h3>调用其他store的信息 : {{ userStore.showMeaage }}</h3>
    
    <button @click="levelbtn1">level++</button>
    <button @click="userStore.levelBtn">简化版</button>

    <!-- 展示请求到的数据 -->
    <h2>请求到的数据</h2>
    <ul>
      <template v-for="item in userStore.banners" :key="item.id">
        <li>{{ item.title }}</li>
      </template>
    </ul>
    
  </div>
</template>

<script setup>
import useUser from './stores/user'
import { toRefs } from 'vue'
const userStore = useUser()

// 简化版本
const { name,age,level } = toRefs(userStore)

// 直接修改state的值
const changge = ()=>{
  userStore.name = '无理由',
  userStore.age = 40,
  userStore.level = 999
}

// 简易版修改state的值
const chang = ()=>{
  userStore.$patch({
    name : '简化版无理由',
    age : 88,
    level : 88
  })
}

// 重置信息
const reset = ()=>{
  userStore.$reset()
}

// level++
const levelbtn1 = ()=>{
  userStore.levelBtn()
}

// 获取请求的数据 
userStore.fetchHomeMultidata()

</script>

<style>

</style>