🍍Pinia

本文最后更新于:2022年5月3日 下午

引入Pinia

🍍安装

1
pnpm i pinia

🍍导入

1
2
3
4
5
6
7
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

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

创建store

🌿申明store

store.js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { defineStore } from "pinia"

export const useStore = defineStore({ // 定义调用函数
id = 'main', // id必选且唯一
state: () => {}; // 返回一个对象(其属性即全局变量)
getters: {}; // 一个读取计算属性的方法集
actions: {}; // 一个store的方法,用于处理状态变更
})

// 亦可简写id
export const useStore = defineStore('main', {
state: () => {};
getters: {};
actions: {};
})

State

🥬定义state

state是一个返回一个存有全局状态变量的对象的函数

1
2
3
4
5
6
7
8
export const useStore = defineStore('main', {
state: () => {
return {
title: 'Pinia🍍',
date: '2022/1/23 下午1:35:22'
}
}
});

🥬获取state

📌获取整个store对象

1
2
3
4
5
6
7
8
9
10
11
<script setup>
import { useStore } from 'xxx/index.js'
const store = useStore()
console.log(store.title) // >Pinia🍍
</script>

<template>
<h1>
{{ store.title }}
</h1>
</template>

📌获取静态属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script setup>
import { useStore } from 'xxx/index.js'
const { title } = useStore()
/*
* 该获取方法title更改后不会更新,相当于一个常量
* 常量名必须与`state`命名相同
*/
</script>

<template>
<h1>
{{ title }}
</h1>
</template>

📌获取动态属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script setup>
import { useStore } from 'xxx/index.js'
import { storeToRefs } from 'pinia'

const { title } = storeToRefs(useStore())
/*
* 使用`const { title } = toRefs(useStore())`有相同功能,但不推荐
* title为响应式数据
*/
</script>

<template>
<h1>
{{ title }}
</h1>
</template>

🥬更新state状态

📌直接修改

1
2
3
4
5
6
<script setup>
import { useStore } from 'xxx/index.js'

const store = useStore()
store.title = 'Hello Pinia!'
</script>

📌使用$patch

1
2
3
4
5
6
7
8
9
10
11
12
13
<script setup>
import { useStore } from 'xxx/index.js'

const store = useStore()
store.$patch({
title: 'Hello Pinia!',
nums: [0, 1, 2, 3] // 更新数组需将整个数组(对象)输入
})

store.$patch((state) => { // 回调`state`参数即`store`内的`state`
state.nums[0]++ // 使用回调可优化数组状态更改
})
</script>

📌调用Action

推荐使用actions的方法来更改状态值

🥬重置state

组件内调用$reset()方法可使状态回归至初态

1
2
3
4
5
6
<script setup>
import { useStore } from 'xxx/index.js'
const store = useStore()
store.title = '?>-=+.@1#'
store.$reset()
</script>

Getter

getter类似计算属性,用于返回一些计算后取得的值,有缓存功能

🍉调用自身store

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { defineStore } from 'pinia'

export const useStore = defineStore('foo', {
state: () => ({ value: 3 }),
getters: { // 第一个参数为state
doubleValue: (state) => 2 * state.value,
trebleValue() { // 可以使用this
return 3 * this.value
},
fivefoldValue: { // 可以调用其他Getter
return doubleValue(state) + trebleValue(state)
}
}
})

🍉调用其他store

1
2
3
4
5
6
7
8
9
10
11
12
import { defineStore } from 'pinia'
import { useStore2 } from 'url'

export const useStore = defineStore('bar', {
state: () => ({ value: 1 }),
getters: {
add() {
const state2 = store2() // 与setup中调用一样
return this.value + state2.value
}
}
})

action

Getter相似

🥒调用自身store

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { defineStore } from 'pinia'

export const useStore = defineStore('foo', () => {
state: () => ({ value: 3 }),
actions: { // 第一个参数为state
doubleValue: (state) => 2 * state.value,
trebleValue() { // 可以使用this
return 3 * this.value
},
fivefoldValue: { // 可以调用其他Getter
return doubleValue(state) + trebleValue(state)
}
}
})

🥒调用其他store

1
2
3
4
5
6
7
8
9
10
11
12
import { defineStore } from 'pinia'
import { store2 } from 'url'

export const useStore = defineStore('bar', () => {
state: () => ({ value: 1 }),
actions: {
add() {
const state2 = store2() // 与setup中调用一样
return this.value + state2.value
}
}
})

工程化

数据持久化

🍐安装插件

1
pnpm i pinia-plugin-persist

🍐挂载插件

main.ts

1
2
3
4
5
6
7
8
9
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import piniaPluginPersist from 'pinia-plugin-persist'
import App from './App.vue'

const app = createApp(App)

app.use(createPinia().use(piniaPluginPersist))
.mount('#app')

🍐开启缓存

1
2
3
4
5
6
export const useStore = defineStore('main', {
// ...
persist: {
enable: true
}
})

参考文档:

《Pinia (vuejs.org)》


🍍Pinia
https://qingshaner.com/pinia/
作者
清山
发布于
2022年1月23日
许可协议