Pinia的使用

安装

yarn add pinia
# or
npm i pinia

基本使用

在main.js中挂载Pinia

import { createPinia } from 'pinia'
const Pinia = createPinia()

createApp(App).use(Pinia).mount('#app')

新建仓库文件

src/test.js

引入defineStore方法

import { defineStore } from 'pinia'

创建store

命名规则：useXxxStore

defineStore( storeID , {state,actions,getters} )

参数1：store的唯一标识，也就是仓库名字

参数2：对象，可以在对象内提供state、actions、getters

const useTestStore = defineStore('test', {
  // state是一个函数 在返回的对象中写数据
    state: () => {
        return {
            name: 'liao',
            website: 'https://liaooo.cn',
        }
    },
    actions: {},
    getters: {}
})

export default useTestStore

在组件中使用

<script setup>
    import useTestStore from './store/test'
    const test = useTestStore()
</script>

<template>
    {{ test.name }}
    {{ test.website }}
</template>

actions的使用

Pinia中没有mutations，只有actions

在actions中添加方法并修改数据

...
actions: {
        changeName(name) {
            this.name = name
        }
  }
...

在组件中使用actions

<script setup>
    import useTestStore from './store'
    const test = useTestStore()
  // 执行actions中的方法
    test.changeName('liaoliao')
</script>

getters的使用

添加getter

...
getters: {
        infoPage() {
            return this.website + '/talking'
        },
    }
...

在组件中使用

<template>
    ...
    {{ test.infoPage }}
</template>

<script setup>
    import useTestStore from './store'
    const test = useTestStore()
    ...
</script>

storeToRefs的使用

直接解构store中的数据会导致数据丢失响应式特性

<script setup>
    import useTestStore from './store'
    const test = useTestStore()
  // 解构出来的数据将不再是响应式的
    const { name, website } = test
    ...
</script>

使用storeToRefs可以使解构出来的数据依旧是响应式的

<script setup>
  // 从pinia中引入storeToRefs方法
  import { storeToRefs } from 'pinia'
    ...
    const { name, website } = storeToRefs(test)
    ...
</script>

模块化

根据项目复杂程度，有时候需要存储较多数据，可以定义多个store，最后统一用一个根store整合

新建user模块

src/store/user.js

import { defineStore } from 'pinia'

const useUserStore = defineStore('user', {})

export default useUserStore

新建······模块

新建根store

src/store/index.js

// 导入所有store
import useUserStore from './user'
import use···Store from './···'

// 统一导出useStore()方法
export default function useStore() {
  return {
    user: useUserStore(),
     ···: use···Store()
  }
}

在组件中使用

<script setup>
    import { storeToRefs } from 'pinia'
    import useStore from './store'
  // 解构user store
    const { user } = useStore()
    const { name, pwd } = storeToRefs(user)
</script>

订阅store中数据的变化($subscribe)

store.$subscribe详见下一篇笔记