pinia在vue3中使用

pinia就是vuex5

1.安装引入

npm install pinia

2.引入与使用

store.js

//1.定义容器
import { defineStore  } from 'pinia'
//参数1：容器的ID，必须唯一，将来Pinia会把所有的容器挂载到根容器
export const useStore = defineStore  ('main',{
    /***
     *类似于组件的 data数据的 ,用来存储全局状态的
     * 1、必须是箭头函数
     */
    state:()=>{
        return {
            count:100,
            foo:"lcq",
            arr:[1,2,3]
        }
    },


    /***
     *类似于组件的计算属性computed，有缓存的功能
     */
    getters:{
        //函数接受一个可选参数：state状态对象
        //每次调用state10,都会让count+10 并且返回结果
        count10(state){
            console.log('count10 调用了')
            return state.count +10
        },

        //如果在getters中使用了this，必须手动指定返回值的类型，否则类型推导不出来
        // count110():number{
        //     console.log('count10 调用了')
        //     return this.count +10
        // }
    },


    /***
     *封装处理数据的函数（业务逻辑)：修改数据
     */
    actions:{
        //aciton中不能使用箭头函数，因为箭头函数绑定外部的 this
        changeState(num:number){
            // this.count++
            // this.foo = "hello"
            // this.arr.push(4)
            // this.$pathc

            //建议使用
            this.$patch(state =>{
                state.count+=num
                state.foo='hello'
                state.arr.push(4)
            })
        }
    },
})


//2.修改容器中的 state

//3.修改 state

//4. 容器中的 action 的使用

<template>
<div>
  {{Store.count}}
  {{Store.foo}}
  {{Store.arr}}
  {{Store.count10}}
</div>
</template>

<script setup>
import {useStore} from "../../../store";
import {storeToRefs}  from 'pinia'
const Store=useStore();

//storeToRefs结构赋值:实现数据的响应式
//Pinia 其实就是吧 state数据都做了reactive 处理了
const {count} = storeToRefs(Store)

//数据的修改
const handleChangeState = () =>{
  //方式一：
  // Store.count++
  // Store.foo = 'hello'

  //方式二：如果需要更新多个数据，使用$patch 批量更新:实现性能优化
  // Store.$patch({
  //   count : Store.count+1,
  //   foo:'hello',
  //   arr:[...Store.arr,4] //添加数据
  // })

  //方式三：$patch一个函数:批量更新，更好的性能
  Store.$patch(state =>{
    state.count++
    state.foo='hello'
    state.arr.push(4)
  })

  //方式四：逻辑比较多的时候，封装到 actions中进行使用
  Store.changeState(10)
}

console.log(Store.count)
</script>

<style lang='less' scoped>



</style>

3.修改数据的注意事项

修改数据时，要去调用拥有这个数据的容器里面的actons里面的函数
因为这样子修改数据才是响应式的