pinia基本使用(二)の值的获取

仓库获取值的方式

1. 通过仓库实例获取

   <script lang="ts" setup>
     import { mainStore } from './sotre/index'
     const store = mainStore()
     const change = ()=>{ store.change(1) }
   </script>
   <template>
       <h1>{{ store.count }}</h1>
       <button @click="change">改变</button>
   </template>

2. 解构仓库实例获取

注意: 解构都会使数据失去响应式,所以可以通过vue本身提供的toRefs添加响应式或者pinia提供的storeToRefs

<script lang="ts" setup>
    import { mainStore } from './sotre/index'
    /* 推荐使用pinia提供的添加响应式方法 */
    import { storeToRefs } from 'pinia'
    const store = mainStore()
    const { count } = storeToRefs(store)
    const change = ()=>{ store.change(1) }
</script>
<template>
  <h1>{{ count }}</h1>
  <button @click="change">改变</button>
</template>

值得注意: 在ts中,使用storeToRefs解构actions中的方法会提示找不到,所以如果是方法不推荐解构获取

3. map函数
   定义: pinia提供了类似vuex中的map函数,返回一个值/方法的集合对象
   用法:
   mapState(模块名称,数组/对象),mapGetters(),mapActions()

   <script lang="ts" setup>
       import { mainStore } from './sotre/index'
       /* 推荐使用pinia提供的添加响应式方法 */
       import { mapState,mapActions, mapGetters } from 'pinia'
       const { count } = mapState(mainStore,[
         'count','value1', 'value2'
       ])
   
       /* 对象方法写法 mapState独有
         可以对state的值进行加工
        */
       const stateAll = mapState(mainStore, {
          count(state){
           return state.count ** 2
          }
       })
   
       const store4 = mapGetters(mainStore, ['countDouble'])
       const dbCount = store4.dbCount()
       const { changeV } = mapActions(mainStore, ['changeV'])
       const foo = ()=>{ changeV(3) }
   </script>
   <template>
     // 返回的是函数需要执行一下才能返回真正的值
     <h1>{{ count() }}</h1>
     <button @click="foo">改变</button>
   </template>
   

   注意: 使用mapState和mapGetters获取指定值,返回的都是函数,需要调用获取真正的值
   注意: 解构不会失去响应式