JavaScript
import { defineStore } from 'pinia'

// defineStore 本身的返回值是一个函数
// 习惯用useXXX来命名 => 规范
const useCounter = defineStore("counter",{
    state:()=> ({
        count:999
    })
})

export default useCounter

这个name,也称为id 是必要的的,Pinia使用它来将store连接到devtools

返回的函数统一使用useXXX作为命名方案,这是约定的规范

使用定义的Store

Store在它被使用之前是不会创建的,可以通过调用use函数来使用Store

JavaScript
<template>
  <div class="home">
    <h2>Home view</h2>
    <h2>count: { { counterStore.count }}</h2>
  </div>
</template>

<script setup>
import useCounter from '@/stores/counter';

const counterStore = useCounter()
</script>

<style scoped>
</style>

注意Store获取到后不能被解构,不然会失去响应式!

为了从Store中提取属性同时保持其响应式需要使用storeToRefs()

三、Pinia核心概念 State

认识和定义State

state是store的核心部分,因为store是用来帮助我们管理状态的

在Pinia中,状态被定义为返回初始状态的函数

操作State(一)

读取和写入state:

默认情况下,可以通过store实例访问状态来直接读取和写入状态

JavaScript
const counterStore = useCounter()

counterStore.count++
counterStore.name = "xiong"

重置State:

可以通过调用store上的$reset()方法将状态重置到其初始值;

JavaScript
const counterStore = useCounter()
counterStore.$reset()

操作State(二)

改变State:

除了直接使用store.counter++修改store,还可以调用$patch方法

它允许你使用部分"state"对象同时应用多个更改

JavaScript
function changeStateClick(){
    // 1 一个一个修改状态
    // userStore.name = "xiaoxiong"
    // userStore.age = 18
    // userStore.level = 9999

    // 2 一次性修改多个状态
    userStore.$patch({
      name:"xx",
      age:20
    })
  }

替换State:

可以通过将其$state属性设置为新对象来替换Store的整个状态

JavaScript
counterStore.$state = {
counter:1,
name:"xxiong"
}

四、Pinia核心概念 Getters

认识和定义Getters

Getters相当于Store的计算属性:

可以用defineStore()中的getters属性定义

getters中可以定义接受一个state作为参数的函数

JavaScript
const useCounter = defineStore("counter",{
    state:()=> ({
        count:999,
        friends:[
            { id:1,name:"xiong" },
            { id:2,name:"xx" },
            { id:3,name:"xxiong" },
        ]
    }),
    getters:{
        // 1 基本使用
        doubleCount(state){
            return state.count * 2
        },
        // 2 一个getter引入另外一个getter
        doubleCountAddOne(){
            // 通过this访问 this绑定store实例
            return this.doubleCount + 1
        },
        // 3 getters也支持返回一个函数
        getFriendById(state){
            return function(id) {
                // 高阶js写法
                return state.friends.find(item => item.id === id )

                // 普通写法
                // for(let i = 0;i<state.friends.length;i++){
                //     const friend = state.friends[i]
                //     if(friend.id === id){
                //         return friend
                //     }
                // }
            }
        },
        // 4 getters中使用到别的store中的数据
        showMsg(state){
            // 展示 count 和 user内的信息
            // 在上面导入 user包
            // 1 获取user信息
            const useStore = useUser()
            // 2 获取自己信息 state

            // 3 拼接信息
            return `name:${useStore.name}-count:${state.count}`
        }

    }
})

访问Getters(一)

访问当前Store的Getters:

JavaScript
<h2>doubleCount: { { countStore.doubleCount }}</h2>
<h2>doubleCountAddOne: { { countStore.doubleCountAddOne }}</h2>
<h2>friend-2: { { countStore.getFriendById(2) }}</h2>
<h2>拼接counter里面的count和user里面的名字: showMsg:{ { countStore.showMsg }}</h2>

Getters中访问自己的其他Getters:

可以通过 this来访问到当前store实例的所有其他属性:

JavaScript
doubleCountAddOne(){
// 通过this访问 this绑定store实例
return this.doubleCount + 1
},

访问其他store的Getters:

JavaScript
// 4 getters中使用到别的store中的数据
showMsg(state){
    // 展示 count 和 user内的信息
    // 在上面导入 user包
    // 1 获取user信息
    const useStore = useUser()
    // 2 获取自己信息 state

    // 3 拼接信息
    return `name:${useStore.name}-count:${state.count}`
}

访问Getters(二)

Getters也可以返回一个函数

JavaScript
// 3 getters也支持返回一个函数
getFriendById(state){
    return function(id) {
        // 高阶js写法
        return state.friends.find(item => item.id === id )

        // 普通写法
        // for(let i = 0;i<state.friends.length;i++){
        //     const friend = state.friends[i]
        //     if(friend.id === id){
        //         return friend
        //     }
        // }
    }
},

五、Pinia核心概念 Actions

认识和定义Actions

Actions相当于组件中的methods

使用defineStore()中的actions属性定义,且它们非常适合业务逻辑

和getters一样,在actions中可以通过this访问整个store实例的所有操作;

JavaScript
actions:{
    // 用来定义方法,这里不会给我们传进来一个state,
    // 他用来传递参数
    increment() {
        this.count++
    },
    // 如:下示例
    incrementAdd(num){
        this.count += num
    }
}

Actions执行异步操作

Actions中是支持异步操作的,我们可以编写异步函数,在函数中使用await

JavaScript
actions:{
    async fetchHomeMultidata(){
        const res = await fetch("http://xxxx:8000/home/")
        const data = await res.json()
        // console.log(data) // 拿到数据
        this.banners = data.data.banner.list
        this.recommends = data.data.recommend.list
    }
}

转载：https://blog.csdn.net/coderHing/article/details/127835058

查看评论

小言_互联网的博客

小言_互联网的博客

个人资料

文章分类

文章存档

阅读排行

评论排行

推荐文章

Vue | Vue.js 全家桶 Pinia状态管理

一、Pinia和Vuex的对比

什么是Pinia呢?

Pina和Vuex的区别

如何使用Pinia

二、创建Pinia的Store

认识Store

定义一个Store