标签：const name level getters userStore state 实例 id

使用 : 

<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

标签：const,name,level,getters,userStore,state,实例,id
来源： https://www.cnblogs.com/qd-lbxx/p/16641952.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。