[保甜大菠萝] Pinia

认识Pinia

　Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态。

  上面这个是官网对Pinia的一个定义，从定义上我们其实可以看出来，它可能比Vuex要精炼一些。Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的     状态，并以相应的规则保证状态以一种可预测的方式发生变化。

Pinia 的特性：

• pinia 也具有 state、getters、actions，但是移除了 modules、mutations ；

• pinia 的 actions 里面可以支持同步也可以支持异步；

• pinia 采用模块式管理，每个 store 都是独立的，互相不影响；

Pinia 与 Vuex 相比主要功能优点在于：

• 兼容支持 Vue 2.x 与 3.x 项目；
• 更友好的 Typescript 语法支持；
• 比 Vuex 体积更小，构建压缩后只有 1KB 左右的大小；
• 支持服务端渲染；

Pinia的常规用法

通过常用的包管理器进行安装：

yarn add pinia
# 或者使用 npm
npm install pinia

安装完成后，我们需要将pinia挂载到Vue应用中，也就是我们需要创建一个根存储传递给应用程式。我们需要修改main.js，引入pinia提供的createPinia方法：

import  { createApp }  from 'vue';
import { createPinia } from 'pinia';

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

创建一个 Store：

import { defineStore } from 'pinia'

export const useStore= defineStore('main', {

　　state: () => {

　　　　return {

　　　　 msg: 'hello',

　　　　 count: 1

　　} },

　　　　actions: {},

　　　　getters: {},

})

使用store

<script lang="ts" setup>
    import { useStore } from '@/store/main'
    import { storeToRefs } from 'pinia'

    const store = mainStore()
    const { count } = storeToRefs(store)
    //修改单条数据
    const handleAddCount = () => {
        store.count++
    }
</script>
　　//数据显示
<template>
    <div>
        <p>{{ store.msg }}</p>
        <p>{{ count }}</p>
        <button @click="handlerCount">+</button>
    </div>
</template>

调用 $patch 方法，在同一时间更改多个属性：

<script lang="ts" setup>
    import { mainStore } from '@/store/main'
    import { storeToRefs } from 'pinia'

    const store = mainStore()
    const { count } = storeToRefs(store)
    // 使用$patch + 对象
    const handlerUpdateObj= () => {
        store.$patch({
            msg: store.msg === 'hello' ? 'hello world' : 'hello',
            count: store.count + 2
        })
    }
    // 使用$patch + 回调
    const handlerUpdateFun= () => {
        store.$patch((state) => {
            state.msg = state.msg === 'hello' ? 'hello world' : 'hello'
            state.count = state.count + 3
        })
    }
</script>
<template>
    <div>
        <p>{{ store.msg }}</p>
        <p>{{ count }}</p>
        <button @click="handlerUpdateObj">对象</button>
        <button @click="handlerUpdateFun">回调</button>
    </div>
</template>

使用Getter

export const useStore = defineStore('main', {
  state: () => ({
    count: 0,
  }),
  getters: {
    doubleCount: (state) => state.count * 2,
  },
})

使用getter

<script setup>
import { useCounterStore } from './counterStore'
const store = useCounterStore()
</script>
<template>
  <p>Double count is {{ store.doubleCount }}</p>
</template>

 

使用actions

//添加一个方法
import { defineStore } from 'pinia'
export const mainStore = defineStore('main', {
    state: () => {
        return {
            msg: 'hello',
            count: 1
        }
    },
    actions: {
        handlerUpdateState() {
            this.count++
            this.msg = this.msg === 'hello' ? 'hello world' : 'hello'
        }
    }
})

使用方式为：$store.方法名

<template>
    <div>
        <p>{{ store.msg }}</p>
        <p>{{ count }}</p>
        <button @click="handlerUseAction">使用action</button>
    </div>
</template>

<script lang="ts" setup>
    import { mainStore } from '../store/main'
    import { storeToRefs } from 'pinia'

    const store = mainStore()
    const { count } = storeToRefs(store)
    
   // 使用action修改数据
    const handlerUseAction = ()  => {
        store.handlerUpdateState()
    }
</script>

访问其他store中action，在Pinia中，可以在一个store中import引入另外一个store，然后通过调用引入的store方法的形式，获取引入的store的状态。

import { defineStore } from 'pinia'

export const userStore = defineStore('user', {
    state: () => {
        return {
            name: '一切都是风里'
        }
    }
})

import { defineStore } from 'pinia'
import { userStore } from './user'

export const mainStore = defineStore('main', {
    getters: {
        getUserState() {
            return userStore().name
        }
    }
})

最后

   Pinia和Vue3的组合式API形式更加贴合，只需要把它当作一个特殊的数据状态组件来使用就好，不需要那么复杂的流程。以上就是关于 Pinia用法的一些介绍，Pinia的内容还远不止这些，更多内容及使用有待大家自己探索。