Pinia下一代vue状态管理工具

建议大家结合上一篇文章学习：vite+vue script setup语法糖写法：style'me的个人博客 

1、pinia是什么？

•  Pinia是一个围绕Vue 3 Composition API的封装器，Pinia 是一个用于 Vue 的状态管理库，类似 Vuex, 是 Vue 的另一种状态管理方案，Pinia 支持 Vue2 和 Vue3。官网地址：   Pinia

2、pinia的优点？

     符合直觉，易于学习

     极轻， 仅有 1 KB

     模块化设计，便于拆分状态

3、安装pinia

npm install pinia

yarn add pinia

4、基本使用

 首先我们需要再main.js或者main.ts中引入pinia提供的createPinia方法并使用它，代码如下：

//main.js
import { createApp } from "vue"
import App from "@/App.vue"
import {createPinia} from "pinia"
const app = createApp(App)
app.use(createPinia())
app.mount("#app")

5、状态管理---(pinia没有mutations)

pinia是没有mutations的，这点跟vuex不一样，在pinia中actions是既支持同步也支持异步的，其他类似于vuex，它核心的概念就是来管理公用数据或者状态，所有他必然也有state,如何定义呢，首先我们要引入pinia提供的defineStore方法（看到defineStore这种定义的方法，是不是感觉有vue3那味道了），用来创建一个store,defineStore接收两个参数，第一个参数是id(必须唯一)，第二个参数是一个对象，对象下声明state等，代码如下：

//src/store/index.js
import {defineStore} from "pinia"
//值得注意的是：state必须是一个箭头函数
export const useMainStore = defineStore("main",{
    state: ()=>{
        count:0
    },
    actions:{
        countfn(n){
            this.count+=n
        }
    },
    getters:{
        doble:(state)=>state.count+10
    }
})

更值得注意的是上面的代码，在actions中直接可以使用this访问到state中定义的变量（是不是跟vue2中选项式api的操作类似呢，其实actions就类似于vue2选项式methos方法），在actions下定义方法来改变state的时候，这个函数建议不要使用箭头函数，而getters则类似于vue2中的computed计算属性，这样说是不是更好理解了

6、组件中如何使用

在组件中使用，只需要引入刚才export的store名字，即可通过名字去访问，代码如下，一看便懂：

//直接通过$store.count可以直接访问到，是不是很方便
<template>
    <p>pinia初始数据-pinia下一代vue状态管理</p>
    <el-button>{{$store.count}}</el-button>
</template>
<script setup>
    import {useMainStore} from "@/store/index"
    const $store = useMainStore()
</script>

改变数据就变得更简单了，比如我们现在给button加一个事件，来让它每次都+1，代码如下：

<template>
    <p>pinia初始数据-pinia下一代vue状态管理</p>
    <el-button @click="handleChange">{{$store.count}}</el-button>
</template>
<script setup>
    import {useMainStore} from "@/store/index"
    const $store = useMainStore()
    const handleChange = () =>{
        // 第一种
        // $store.count++
        // 第二种
        // $store.countfn(10)
        // 第三种
        // $store.$patch({
        //   count:$store.count+1
        // })
        // 第四种
        $store.$patch(state=>{
          state.count++
        })
     }
</script>

总共有这几种修改state的方式

第一种就是最简单直接的，使用$store.count++直接改变

第二种是使用actions中定义的countfn函数来修改，countfn函数可以接收n个参数

第三种是 $store.$patch接收一个对象，需要修改的对象通过$store.count重新给count赋值，但是这种方式有一点就是数据过多的话，或者数据类型比较复杂的时候就不起作用，毕竟它是重新赋值，并不能直接操作，比如说state下如果有数据，那就不能使用push等方法

第四种就是$store.$patch接收一个state函数，这就补齐了第三种的缺陷，可以直接使用state.count做改变，push也可以正常使用，这种方式直接接收了之前定义的state,都是缓存后的原类型数据，想修改哪个直接修改就行

这四种方式都是修改state的方法，具体我们需要看使用场景来选择使用哪种方法，但我个人建议使用第四种。

7、getters的使用

上面我们说了，getters就类似于vue2x中的computed计算属性，getters每次都会缓存上一次的计算，使用方法如下：

<template>
    <p>pinia初始数据-pinia下一代vue状态管理</p>
    <el-button @click="handleChange">{{$store.count}}</el-button>
    <p>{{$store.doble}}</p>
</template>

跟state一样，直接使用$store.doble就可以，注意我们在getters下定义doble的时候，它是一个方法，但是我们使用它的时候是不需要加()的，大家应该能发现，这是一个retnun函数，如果换成这样写应该能一下就明白了：

getters:{
    doble（state）{
        return state.count+10
    }
}

getters下的方法接收state参数

8、总结

Pinia 相比 Vuex 更加简单，而且 Pinia 可以自由扩展，官方文档api:Plugins | Pinia

Pinia 是符合直觉的状态管理方式，让使用者回到了模块导入导出的原始状态，使状态的来源更加清晰可见

Pinia 的使用感受类似于RecoilRecoil，但没有那么多的概念和 API，主体非常精简，极易上手（Recoil 是 Facebook 官方出品的用于 React 状态管理库，使用 React Hooks 管理状态）

Pinia 2 目前还在 Beta 状态，不建议在生产环境中使用，不过相信稳定了以后会成为 Vue 生态中另一大状态管理方案