介绍
官方文档
Pinia 是 Vue 的存储库，允许跨组件/页面共享状态
与Vuex的区别？
1.没有mutations，只有state,getters,actions
2.state的使用不同，采用函数式声明，与vue中的data属性一致。可以直接修改state中的值。
3.分模块不需要modules，根据文件区分即可
4.对Typescript支持更友好
5.体积更小
安装
1
2
3
| yarn add pinia
# or with npm
npm install pinia
|
使用
引入
1
2
| import { createPinia } from 'pinia'
app.use(createPinia())
|
定义
基础语法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
| # ./store/index.js
import { defineStore } from 'pinia'
export const useStore = defineStore('ID', {
state: () => {
return {
name: '',
count: 0
}
},
getters: {
doubleCount: (state) => {
return state.count * 2
}
},
actions: {
increment(val) {
this.count+=val
}
}
})
# or
export const useStore = defineStore({
id: 'ID',
state: () => {
return {
name: '',
count: 0
}
},
getters: {
doubleCount: (state) => {
return state.count * 2
}
},
actions: {
increment(val) {
this.count+=val
}
}
})
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| # 使用
import { useStore } from './store/index.js'
export default {
setup() {
const store = useStore()
# 直接访问
store.count = 10
const newCount = store.doubleCount
store.increment(10)
return {
store,
newCount
}
},
}
|
storeToRefs
结构赋值时，需要 storeToRefs 处理数据
1
2
3
4
5
6
7
8
9
10
11
12
13
| import { useStore } from './store'
import { storeToRefs } from 'pinia'
export default {
setup() {
const store = useStore()
const { name, count, doubleCount } = storeToRefs(store)
return {
name,
count,
doubleCount
}
},
}
|
批量更改值
$patch 方法
1
2
3
4
5
| const store = useStore()
store.$patch(state => {
state.count++
state.num = ''
})
|
持久化存储
下载 pinia-plugin-persist
文档
1
| npm install pinia-plugin-persist --save
|
引入 pinia-plugin-persist
1
2
3
4
5
6
7
8
9
10
| import { createApp } from 'vue'
import { createPinia } from 'pinia'
import piniaPersist from 'pinia-plugin-persist'
const pinia = createPinia()
pinia.use(piniaPersist)
createApp({})
.use(pinia)
.mount('#app')
|
配置项persist
1
2
3
4
5
6
7
8
9
| export const useStore = defineStore('ID', {
state: () => {return{}},
getters: {},
actions: {},
persist: {
enabled: true,
strategies: []
}
})
|