state 和 getters 的代码实例

使用 : 

<template>
  <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>
    
  </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()
}



</script>

<style>

</style>

user.js

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'},
        ]
    }),
    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}`
        }
    }
})

export default useUser