pinia 使用

使用步骤

1.下载pinia

npm i  pinia

2.在main.js中引入pinia

import { defineStore } from 'pinia'
app.use(pinia)

---

3.在src目录下创建store文件夹 --> index.js

option store

    import { defineStore} from 'pinia'
    export  const useAgeStore  =  defineStore('dingding',{
      state:() =>{  //相当于vue中的data  防止数据污染  // 为了完整类型推理  推荐使用箭头函数
           return  {age：30,name:"张三",arr:[1,2,3,4]}
      }，
      getters :{  //相当于computed 计算属性
         gettersAge(state) {
           return state.age +5
         }
      },
      action：{ //相当于methods
            addAge(){
              //this 指向对应的store 仓库
              this.age ++
            }
      }
    })

setUp store

    import { defineStore} from 'pinia'
    import {computed ,ref } from 'vue'
    export   const useCounterStore  =  defineStore('main',{
      const counter = ref(30)  //state
      const gettersCounter = computed(()=>{  //getters
          return counter.value ++
      })
      function addCounter (){   //actions
            counter.value ++
      } 
      return {counter,gettersCounter ,addCounter }
    })

4.在home.vue中 使用

<script  setup>
   import {useAgeStore , useCounterStore  } from '@/store/index.js'
  import {storeToRefs} from 'pinia'
   const ageStore = useAgeStore()
   const counterStore = useCounterStore() 
   //结构  但是页面不是响应
   count  {counter ,gettersCounter addCounter }  = counterStore 
   //通过storeToRefs 确保页面响应 方法不能storeToRefs结构
    count  {counter ,gettersCounter}  =storeToRefs(counterStore)  //数值结构
    count  { addCounter }  = counterStore 
</script>

 option store
{{ageStore.age}}
{{ageStore.gettersAge}}
<button  @click="ageStore.addAge">修改age</button>
setUp stort
{{counterStore.counter }}
{{counterStore .gettersCounter }}
<button  @click="counterStore.addCounter ">修改counter</button>

 //结构  但是页面不是响应破坏掉响应式 解决办法
 {{counter}}
{{gettersCounter }}
<button  @click="addCounter">修改counter</button>

修改 store 状态

<script  setup>
   import {useAgeStore  } from '@/store/index.js'
   const ageStore = useAgeStore()
   function changeAge(){
       //直接修改  方式一
      ageStore.age++
      //批量修改  方式二
      ageStore.$patch({
         age:40,
         name:"张三丰",
         arr:[...ageStore.arr,5]
      })
      //批量修改 $path(函数) 强烈推荐  方式三
      ageStore.$patch((state)=>{
           state.age = 40
           state.name = "张三丰",
           state.arr.push(5)
      })
      //逻辑复杂的时候  封装到actions中的函数  方式四
   }
</script>

 option store
<button  @click="changeAge">修改age</button>