Pinia(Vue的另外一种状态管理工具 类似Vuex) 的使用

前言

相信在Vue中提到状态管理，大家一定会想到 Vuex。的确 Vuex确实是比较强大的，但Vuex 多少有点重，而且对 Typescript的支持也不是那么的友好，同时门槛也比较高，学习成本比较大。

基于以上种种原因，随着 Pinia 的不断完善 也渐渐的进入到小伙伴的视野中，今天就同大家一起学习一下 Pinia 的优美之处。

Pinia 始于 2019年11月， 让人比较心动的事，Pinia 同时支持 Vue2 和 Vue3 这一点可以说是很良心的。当然，由于VueAdminWork中Vue3的版本比较多，我们下面只介绍一下在 Vue3 中的用法。

和 Vuex 差不多的事，Pinia 的 store 也同样有 `state` `actions` `getters` 的这些概念，但比 Vuex 更加简洁的是没有 `mutations`，这一点个人觉得很赞

官网：Pinia

引入

npm install pinia

yarn add pinia

 一、在src下创建一个pinia文件夹，引入使用

// pinia 文件
import { defineStore } from 'pinia'

export const useStore = defineStore('main', {
  state: () => {
    return {
        num:20
    }
  },
  actions: {
    AddNum(val){
       this.num+=val
    }
   },
  getters: {
    doubleCount: (state) => state.num* 2,
    }
})

这里注意的是 第一个参数是必须要有的，并且是独一无二的，这将是一个 store 的唯一标识

按官网的介绍：actions 等于 组件中的 methods ，里面可以定义很多业务逻辑的方法。

                但有一个地方非常点赞的是，actions里面的方法支持异步。

getters 等于 组件中  computed ，用法也很简单

 二、在main文件中引入

// main.js 
import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from "pinia"

const pinia = createPinia()

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

三、使用 

<template>
  <h1>{{ store.num }}</h1>

    <p>{{ store.doubleCount }}</p>

   <button @click = "add"></button>
    
</template>

<script setup>
import { useStore } from '@/pinia'

  const store = useStore()
   const add = () => {
        store.AddNum(10)
     }

</script>

 最后附上一张完整的代码逻辑图，一看就会的那种