Pinia的核心方法

码农小段

已于 2023-10-01 20:11:33 修改

阅读量402

点赞数 1

分类专栏：前端 vue.js Pinia 文章标签：前端 javascript vue.js npm 前端框架

于 2023-10-01 20:11:03 首次发布

本文链接：https://blog.csdn.net/weixin_69799831/article/details/133420417

版权

前端同时被 3 个专栏收录

7 篇文章 0 订阅

订阅专栏

vue.js

3 篇文章 0 订阅

订阅专栏

Pinia

2 篇文章 0 订阅

订阅专栏

1.创建State

import  { defineStore }  from 'pinia'

export const useCountStore = defineStore("count",{
    state:()=>{
        return {
            count:10
        }
    }
})

2.访问State

访问state有两种方法，分别是组合式api和选项式api

1.组合式api访问State

实现方法：

<template>
    <div>
        <h1>count组件</h1>
         <!--第一种引用方式  -->
        <div>count值:{{ count }}</div>
         <!--第二种引用方式  -->
         <div>count值:{{ store.count }}</div>
    </div>
</template>
<script setup>
    // 组合式api访问State
    import { useCountStore } from '../stores/count'
    //有两种获取方法，取其中一种即可
    //第一种
    const { count } = useCountStore();
    //第二种
    const store = useCountStore();
</script>

显示效果：

2.选项式api访问State

如果您不喜欢使用组合式api或者您还使用computed或者methods则使用选项式api

实现方法:

<template>
    <h1>选项式count组件</h1>
    <div>count: {{ count }}</div>
    <div>运算后的值：{{ doubleCount }}</div>
</template>
<script>
    //选项式api需引入该方法
    import { mapState } from "pinia"
    import { useCountStore } from '../stores/count';
   

    export default {
        computed:{
            ...mapState(useCountStore,{
                count:store=>store.count,
                //在选项式api中在此处可以对库中数据进行运算
                doubleCount(store){
                    return store.count * 2;
                }
            })
        }
    }
</script>

显示效果:

二、修改状态

在PInia中修改状态，不需要引入额外的概念，而是直接进行store,count++等运算直接修改state即可，当然修改状态也分为组合式api和选项式api

1.组合式api修改状态

实现方法：

<template>
    <div>
        <h1>组合式count组件</h1>
        <div>count值:{{ store.count }}</div>
        <!-- 创建修改的点击按钮 -->
        <div><button @click="updateClick">修改状态</button></div>
    </div>
</template>
<script setup>
    // 组合式api访问State
    import { useCountStore } from '../stores/count'
    const store = useCountStore()
    // 实现点击方法
    const updateClick = () =>{
        store.count++;
    }
</script>

实现效果:

2.选项式api修改状态

实现方法:

<template>
    <h1>选项式count组件</h1>
    <div>count: {{ count }}</div>
    <button @click="updateClick">修改状态</button>
</template>
<script>
    //选项式api需引入该方法
    //组合式api在修改状态时，需要引入mapWritableState这个方法
    import { mapState,mapWritableState } from "pinia"
    import { useCountStore } from '../stores/count';
   

    export default {
        computed:{
            ...mapState(useCountStore,{
                count:store=>store.count,
    
            }),
            //在此处将useCountStore展开获取其中的count，注意：后面第二个为数组格式
            ...mapWritableState(useCountStore,["count"])
        },
        methods:{
            //定义修改方法
            updateClick(){
                this.count++;
            }
        }
    }
</script>

显示效果：

三、读取Getters

Getter完全等同于Store状态的计算值

1.创建getters方法

import  { defineStore }  from 'pinia'

export const useCountStore = defineStore("count",{
    state:()=>{
        return {
            count:10
        }
    },
    getters:{
        getCount:(state)=>"当前count值："+state.count
    }
})

2.组合式api的getter使用:

实现方法:

<template>
    <div>
        <h1>组合式count组件</h1>
        <!-- 这里使用了getter -->
        <div>{{ store.getCount }}</div>
    </div>
</template>
<script setup>
    // 组合式api访问State
    import { useCountStore } from '../stores/count'
    const store = useCountStore()
</script>

显示效果：

3.选项式api的getter使用：

实现方法:

<template>
    <h1>选项式count组件</h1>
    <div>{{ getCount }}</div>
</template>
<script>
    //选项式api需引入该方法
    import { mapState } from "pinia"
    import { useCountStore } from '../stores/count';
    export default {
        computed:{
            ...mapState(useCountStore,["getCount"]),
        }
    }
</script>

显示效果：

4.访问其他的getter：

实现方法:

//在库文件中
import  { defineStore }  from 'pinia'

export const useCountStore = defineStore("count",{
    state:()=>{
        return {
            count:10
        }
    },
    getters:{
        getCount:(state)=>"当前count值:"+state.count,
        //doubleCount访问了上面的getCount
        doubleCount(state){
            return this.getCount + state.count
        }
    }
})

使用方法：

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

显示效果：

由于getCount中有字符串格式所以在相加时候并没有进行两数相加而是成为了字符串的拼接

在这里仅仅使用了组合式api的方法进行实现，选项式api的方法请参考getter的相关使用方式

四、方法Actions

1.创建Actions方法

Actions 相当于组件中的 methods 。它们可以使用 defineStore() 中的

actions 属性定义，并且 它们非常适合定义业务逻辑

import { defineStore } from 'pinia'

export const useCountStore = defineStore("count", {
    state: () => {
        return {
            count: 10
        }
    },
    getters: {
        getCount: (state) => "当前count值:" + state.count,
        //doubleCount访问了上面的getCount
        doubleCount(state) {
            return this.getCount + state.count
        }
    },
//与state和getter同级
    actions: {
        increment() {
            this.count++
        },
        decrement() {
            this.count--
        }
    }
})

2.组合式api的Actions使用:

使用方法:

<template>
    <div>
        <h1>组合式count组件</h1>
        <div>count值:{{ store.count }}</div>
        <!-- 创建修改的点击按钮 -->
        <div><button @click="addCountHandler">增加</button></div>
        <div><button @click="delCountHandler">减少</button></div>
    </div>
</template>
<script setup>
    // 组合式api访问State
    import { useCountStore } from '../stores/count'
    const store = useCountStore()
    // 实现点击方法
    const addCountHandler = () =>{
        store.increment()
    }
    const delCountHandler = () =>{
        store.decrement()
    }
</script>

3.选项式api的Actions使用：

<template>
    <h1>选项式count组件</h1>
    <div>count: {{ count }}</div>
    <div><button @click="addCountHandler">增加</button></div>
    <div><button @click="delCountHandler">减少</button></div>
</template>
<script>
    //选项式api需引入该方法
    //组合式api在使用Actions时，需要引入mapActions 这个方法
    import { mapState,mapWritableState,mapActions } from "pinia"
    import { useCountStore } from '../stores/count';
   

    export default {
        computed:{
            ...mapState(useCountStore,{
                count:store=>store.count,
            }),
            //在此处将useCountStore展开获取其中的count，注意：后面第二个为数组格式
            ...mapWritableState(useCountStore,["count"])
        },
        methods:{
            ...mapActions(useCountStore,["increment","decrement"]),
            addCountHandler(){
                this.increment()
            },
            delCountHandler(){
                this.decrement()
            }
        }
    }
</script>

五、Pinia热更新

pinia 支持热模块替换，因此你可以编辑store，并直接在您的应用程序中与它们交互，而无需重新加载页面，允许您保持现有的状态，添加，甚至删除 state ， action 和 getter

//热更新第一步引入acceptHMRUpdate
import { defineStore,acceptHMRUpdate } from 'pinia'

export const useCountStore = defineStore("count", {
    state: () => {
        return {
            count: 10
        }
    },
})
//Pinia的热更新
/**
 * acceptHMRUpdate
 * 参数1：你需要热更新的仓库
 * 参数2： 热更新
 */
if (import.meta.hot){ 
    import.meta.hot.accept(acceptHMRUpdate(useCountStore, import.meta.hot))
}

六、插件

1.插件的基本使用

使用方法:

1.创建一个plugins的文件并且创建一个js文件

2.创建一个插件，实现代码如下

export function piniaStorePlugins(context){
    console.log(context);
}

3.在mian.js中引入该插件

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

import { createPinia } from "pinia"
//引入插件
import { piniaStorePlugins } from './stores/plugins/countResult'

const app = createApp(App)
//声明pinia
const pinia = createPinia()
//加载插件到pinia
pinia.use(piniaStorePlugins)
app.use(pinia)
app.mount('#app')

效果展示：

打印出相关内容则证明使用成功，在里面我们会发现我们只是想拿到里面的store里面的count值那么我们可以进行如下操作将store单独解析出来，使用里面count值

export function piniaStorePlugins({ store }){
    console.log(store.count);
}

当我们修改count的值的时候发现控制台上并不会实时的给我们显示修改的值，这时我们可以调用store中的$subscribe来实现实时的显示相关数值，实现如下：

export function piniaStorePlugins({ store }){
    console.log(store.count);
    store.$subscribe(()=>{
        console.log(store.count);
    })
}

2.持久化插件

pinia 有个副作用，就是无法持久化，在浏览器刷新重置之后，会全部回复默认，这时候，我们可以利用插件实现本地持久化存储

1.创建一个本地存储的工具文件夹并且创建一个相关的js文件

2.实现本地存储的功能

export function setStore(key,value){
    localStorage.setItem(key,value)
}
export function getStore(key){
    return localStorage.getItem(key)
}

3.在需要实现存储的插件中引入并实现存储功能

import { getStore,setStore } from "../../utils/storage"
export function piniaStorePlugins({ store }){

    if(getStore("count")){
        store.count = getStore("count")
    }else{
        setStore("count",store.count)
    }
    store.$subscribe(()=>{
        setStore("count",store.count)
    })
}

效果展示:

当时数据发生改变时