pinia的具体使用方法

pinia的具体使用方法

1.安装(pinia支持Vue2和Vue3)

安装需要@next因为pinia2处于beta的阶段,pinia2是对应的Vue3的版本

//使用npm
npm install pinia@next
//使用yarn
yarn add pinia@next

2.核心概念与基本使用

Store是一个保存状态和业务逻辑的实体，可以自由的读取和写入，并且通过导入setup中使用

创建一个store

import { defineStore } from 'pinia'

//定义容器
//参数1:容器的id，必须唯一，将来pinia会把所有的容器挂载到根容器
//参数2：选项对象
//返回值是一个函数，调用得到容器实列
export const useMainStore=defineStore('main',{
    //state类似于组件的data,用来存储全局状态的
    //state必须是函数：这样是为了在服务端渲染的时候避免交叉请求导致的数据状态污染
    //必须是箭头函数，这是为了TS更好的类型推导
   state:()=>{
   return{
      count:100,
      foo:'ber',
      arr:[1,2,3]
   }
   },

#####Getter的基本使用

  //getters 类似于组件的computed，用来封装计算属性，有缓存功能
   //和vuex中的getters没有区别
   getters:{
      // 方式一：这里的state就是上面的state状态对象,使用参数可自动推到出返回值的类型
       count10(state){
       return state.count+20
       }

      //方式二：getters也可使用this
      //直接使用this，ts不会推导出返回值是什么类型，所以要手动标明返回值的类型
       count10():number{
          return this.count+20
       }


      // 方式三：传递参数，但不使用参数,直接用this，获取值也可，自动推出返回值类型(不推荐使用)
      count10(state){
         return this.count+20
      }
   },

#####actions的基本使用

 //类似于组件的methods, 封装业务逻辑，修改state
   actions:{
      //注意不能使用箭头函数定义actions：因为箭头函数绑定外部this，会改变this指向
      //actions就是 通过this返回当前容器实例
      // 这里的actions里的事件接受参数
      // 这里的num:number为自定义参数,需要声明参数类型
      changeState(num:number){
         this.count++;
         this.count+=num
         this.foo='hello!'
         this.arr.push(4)

         // 同理，actions里也可使用$patch
          this.$patch({})
         this.$patch(state=>{})


         //在此注意：patch和普通多次修改的区别在原理上的区别是
         // 1.涉及到数据响应式和视图更新，多次修改，修改几次视图就更新就更新几次
         // 2.patch 批量修改 视图只更新一次，更有利于性能优化
      }
   }

完整的store.ts代码

import { defineStore } from 'pinia'

//定义容器
//参数1:容器的id，必须唯一，将来pinia会把所有的容器挂载到根容器
//参数2：选项对象
//返回值是一个函数，调用得到容器实列
export const useMainStore=defineStore('main',{
    //state类似于组件的data,用来存储全局状态的
    //state必须是函数：这样是为了在服务端渲染的时候避免交叉请求导致的数据状态污染
    //必须是箭头函数，这是为了TS更好的类型推导
   state:()=>{
   return{
      count:100,
      foo:'ber',
      arr:[1,2,3]
   }
   },
   //getters 类似于组件的computed，用来封装计算属性，有缓存功能
   //和vuex中的getters没有区别
   getters:{
      // 方式一：这里的state就是上面的state状态对象,使用参数可自动推到出返回值的类型
       count10(state){
       return state.count+20
       }

      //方式二：getters也可使用this
      //直接使用this，ts不会推导出返回值是什么类型，所以要手动标明返回值的类型
       count10():number{
          return this.count+20
       }


      // 方式三：传递参数，但不使用参数,直接用this，获取值也可，自动推出返回值类型(不推荐使用)
      count10(state){
         return this.count+20
      }
   },
   //类似于组件的methods, 封装业务逻辑，修改state
   actions:{
      //注意不能使用箭头函数定义actions：因为箭头函数绑定外部this，会改变this指向
      //actions就是 通过this返回当前容器实例
      // 这里的actions里的事件接受参数
      // 这里的num:number为自定义参数,需要声明参数类型
      changeState(num:number){
         // this.count++;
         this.count+=num
         this.foo='hello!'
         this.arr.push(4)

         // 同理，actions里也可使用$patch
          this.$patch({})
          this.$patch(state=>{})


         //在此注意：patch和普通多次修改的区别在原理上的区别是
         // 1.涉及到数据响应式和视图更新，多次修改，修改几次视图就更新就更新几次
         // 2.patch 批量修改 视图只更新一次，更有利于性能优化
      }
   }
})
//使用容器中的state
//修改 state
//容器中的actions的使用

创建一个index.vue —> 调用store.ts

<template>
  <p>{{mainStore.count}}</p>
  <p>{{mainStore.arr}}</p>
  {{mainStore.count10}}

  <hr/>
	//解构mainStore后的渲染
  <p>{{count}}</p>
  <p>{{foo}}</p>

  <hr/>

  <p>
    <button @click="handleChangeState">修改数据</button>
  </p>
</template>
<script lang="ts" setup>
  import {useMainStore} from '../store/index'
  import {storeToRefs} from 'pinia'


  const mainStore =useMainStore()
  console.log(mainStore.count)


  //可以直接解构mainStore,但是这样是有问题的，这样拿到的数据不是响应式的，是一次性的，之后count和foo的改变这里是不会变的
  //Pinia其实就是把state数据都做了reactive处理了
   const { count,foo}=mainStore

  //解决不是响应式的办法 官方的一个api storeToRefs
  // storeToRefs的原理是把结构出来的数据做ref响应式代理
  const { count,foo}=storeToRefs(mainStore)

  const handleChangeState=()=>{
    // 数据的修改
    // 方式一：最简单的方式，直接调用修改
     mainStore.count++

    //方式二:如果要修改多个数据，建议使用$patch 批量更新
    // mainStore.$patch({
       count:mainStore.count+1,
       foo:'hello!',
       arr:[...mainStore.arr,4]
     })

    // 方式三:更好的批量更新的函数：$patch是一个函数,这个也是批量更新
    // 这里的state index.ts里的state
       mainStore.$patch(state=>{
         state.count++
         state.foo='hello!'
         state.arr.push(4)
       })


    //方式四：逻辑比较多的时候封装到actions中做处理
    mainStore.changeState(10)
  }

</script>

pinia调试小工具