vue3使用pinia

今天给大家介绍一下vue3的pinia 听说这是未来的vuex5 首先我们需要

npm i pinia 
在我们的项目中进行引入

然后我们在mian.ts文件内引入

import {createPinia} from 'pinia'
import App from './App.vue'
const app = reacteApp(App)
app.use(createPinia())

然后我们在store文件下新建文件 就叫pinia.ts吧 pinia 其实有三个对象 一个state 一个actions 一个getters 相对于vuex少了一个

import { defineStore } from 'pinia'
export const pinia = defineStore('oct',{
    state: () => {
        return{
            count:1
        }
    },
    actions:{},
    getters:{},
})

我们引入defineStore 他有两个参数 一个是他的id 一个是对象 那么你切记 state 的写法是一个对象 至于这个defineStore是什么 我不知道 需要你自己百度

<template>
    <div>{{pinpas.count}}</div>
    <button @click='HandlerMax'></button>
    <button @click='HandlerMin'></button>
</template>
<script lang='ts' setup>
    import { pinia } from '@/store/pinia'
    const pinias = pinia();
    const HandlerMax = () => {
        pinias.count++
    }
     const HandlerM = () => {
        pinias.count--
    }

</script>

我们引入刚才定义的pinia文件中的pinia 然后定义两个事件进行加减 这样我们的功能就实现了 我们也可以通过解构的方式来获取到count 但是解构出来的count就不具备响应式了 我们需要通过storeToRefs来挂载到ref上 下面上代码 因为是挂载到ref上 所以需要.value

<template>
    <div>{{count}}</div>
    <button @click='HandlerMax'></button>
    <button @click='HandlerMin'></button>
</template>
<script lang='ts' setup>
    import { pinia } from '@/store/pinia'
    import { storeToRefs } from 'pinia';
    const { count } = storeToRefs(pinia());
    const HandlerMax = () => {
        count.value++
    }
     const HandlerM = () => {
        count.value--
    }

</script>

下面我介绍第二个对象actions 它内部其实可以写一些函数方法 下面我们看代码

    import { defineStore } from 'pinia'
    export const pinia = defineStore('oct',{
        state: () => {
            return{
                count:1
            }
        },
        actions:{
        //我们把刚才的HandlerMax方法与HandlerMin方法移过来
        //这里我们就可以像vue2内一样使用this了
        HandlerMax(){
            this.count++
        },
         HandlerMin(){
            this.count--
        }
        
        },
        getters:{},
    })

那么我们再vue页面的使用方法是

    <template>
    <div>{{count}}</div>
    <button @click='HandlerMax'></button>
    <button @click='HandlerMin'></button>
</template>
<script lang='ts' setup>
    import { pinia } from '@/store/pinia'
    const pinias = pinia();
    const HandlerMax = () => {
        pinias.HandlerMax()
    }
     const HandlerMin = () => {
        pinias.HandlerMin()
    }

什么？ 还有人等我介绍第三个对象getters？