pinia从青铜到王者

pinia

全局状态管理工具，可爱的小菠萝

Pinia.js 有如下特点：

完整的 ts 的支持；

• 足够轻量，压缩后的体积只有1kb左右;
• 去除 mutations，只有 state，getters，actions；
• actions 支持同步和异步；
• 代码扁平化没有模块嵌套，只有 store 的概念，store 之间可以自由使用，每一个store都是独立的
• 无需手动添加 store，store 一旦创建便会自动添加；
• 支持Vue3 和 Vue2

官网：https://pinia.vuejs.org/

新手指引

安装：yarn add pinia, npm i pinia

在main.js 中

import {createApp} from 'vue'
import App from './App.vue'

import { createPinia } from "pinia";
const pinia = createPinia()

const app = createApp(App)
app.use(router).use(pinia)
app.mount('#app')

新建stroe文件夹，index.js

import { defineStore } from "pinia";
export const useUserStore = defineStore('user',{
  state:()=>{
    return{
      name:'ziheng',
      age:46
    }
  },
  getters:{},
  actions:{}
})

在vue页面中，本文使用vue3组合式函数。

<script setup>
 import { useUserStore } from "@/store";
 const UserStore = useUserStore()
</script>

<template>
  <h1>{{UserStore.name}}现在已经有{{UserStore.age}}了</h1>
</template>

击杀红buff： 修改store中的值

有五种方式修改store中的值。

<template>
  <div class="home">
    home
  </div>
  <h1>{{UserStore.name}}现在已经有{{UserStore.age}}了</h1>
  <div class="btn" @click="chageUserStore">改变</div>
</template>
<script setup>
 import { useUserStore } from "@/store";
 const UserStore = useUserStore()
 function chageUserStore(){
    //直接修改
	UserStore.age++		
    //批量...
 }
</script>

//直接修改
UserStore.age++
//批量修改
UserStore.$patch({
    name:'xigua',
    age:18
})
//使用函数批量修改
UserStore.$patch((state)=>{
    state.name='狗蛋',
    state.age=10
})
//替换原始对象
UserStore.$state = {
    name:'p桃儿',
    age:3
 }

//通过actions修改
import { defineStore } from "pinia";

export const useUserStore = defineStore('user',{
  state:()=>{
    return{
       //相当于data
      name:'ziheng',
      age:46
    }
  },
  getters:{
      //相当于计算属性
  },
  actions:{
     //相当于vue2中的methods
    userStorechange(name){
      this.name=name
    }
  }
})
//在vue页面
UserStore.userStorechange('op')

击杀蓝buff ： 解构store

<template>
  <h1>{{UserStore.name}}现在已经有{{UserStore.age}}岁了</h1>
  <h1>{{name}}现在已经有{{age}}岁了</h1>
  <div class="btn" @click="chageUserStore">改变</div>
</template>

<script setup>
 import { ref, reactive, onMounted, onBeforeMount } from "vue";
 import { useUserStore } from "@/store";
 const UserStore = useUserStore()
 let {name, age} = UserStore  
 function chageUserStore(){
 	 UserStore.age++
 }
</script>
<style>
  .btn{
    background-color: aqua;
    width: 150px;
    height: 40px;
    line-height: 40px;
    position: relative;
    left: 50%;
    transform: translate(-50%);
  }
</style>

可以发现解构出来的值不是响应数据，这里和reactive一样，pinia提供了storeToRefs方法。

使用storeToRefs方法将store数据解构可以实现响应式

 import { storeToRefs } from "pinia";
 let {name, age} = storeToRefs(UserStore)
 function chageUserStore(){
  	age++
 }

协助队友击杀暴君： actions和getters

actions相当于vue2中的methods，在pinia中，actions可以做同步操作，也可以做异步操作，不再像vuex那么麻烦。

import { defineStore } from "pinia";

const login = ()=>{
  return new Promise(resolve=>{
    setTimeout(() => {
      resolve({
        name:'xigua',
        age:18
      })
    }, 3000);
  })
}

export const useUserStore = defineStore('user',{
  state:()=>{
    return{
      user:{},
      description:'子恒吃西瓜',
      computed:1
    }
  },
  getters:{
    newcomputed: (state)=>{
      return state.user.name
    }
  },
  actions:{
    async userStorechange(name){
      let user = await login()
      this.user = user
      this.desyibuafterChange()
    },
    desChange(){
      this.description = '现在是同步的描述'
    },
    desyibuafterChange(){
      this.description = '异步结束了，我再执行一次'
    }
  }
})

<template>
  <div class="wrap">
    <li>actions.同步 : {{description}}</li>
    <li>actions.异步 : {{user.name}}如今{{user.age}}了</li>
    <li>getters {{userStore.newcomputed}}</li>
  </div>
  <div class="btn" @click="chageUserStore">改变</div>
</template>

<script setup>
  import { storeToRefs } from "pinia";
  import { useUserStore } from "@/store";
  const userStore = useUserStore()
  let {user, description, computed} = storeToRefs(userStore)
  function chageUserStore (){
    userStore.userStorechange()
    userStore.desChange()
  }
</script>
<style>
  li{
    list-style: none;
    margin: 10px 0;
  }
  .btn{
    background-color: aqua;
    width: 150px;
    height: 40px;
    line-height: 40px;
    position: relative;
    left: 50%;
    transform: translate(-50%);
  }
</style>

进攻敌方防御塔： api篇

• $reset

  用来恢复store初始状态

• $abscribe

  只要state中的值发生变化就会执行这个函数

  userStore.$subscribe((args,state)=>{
    console.log(args,state)
  })
  

第二个参数

如果你的组件卸载之后还想继续调用请设置第二个参数

Test.$subscribe((args,state)=>{
   console.log(args,state);
   
},{
  detached:true
})

• $onaction

  只要调用actions中的方法就会走这个函数

  userStore.$onAction((args)=>{
    console.log(args)
  },)
  

after: 此方法中写的代码在onaction方法内的代码执行完后执行

onError：处理错误 异步

游戏胜利：victory，让我们共同庆祝，我们青铜一满星了，进阶之路让我们一起开黑。