1. 安装
yarn add pinia
# or with npm
npm install pinia
// vue3中
import { createPinia } from 'pinia'
app.use(createPinia())
2.store
2.1 创建文件
import { defineStore } from 'pinia'
export const useCounterStore = defineStore({
id: 'count',
state: () => ({
count: 0
}),
getters: {
doubleCount: (state) => state.count * 2
},
actions: {
increment() {
this.count++
}
}
})
2.2 使用
// 在需要用到的地方直接引入
import { useCounterStore } from '@/stores/count'
const store = useCounterStore()
store.xxx 可以调用所有state,getters,actions
store.state
store.doubleCount
store.increment
3. 修改State中的值
主要可通过以下5种方式进行修改
import { useCounterStore } from '@/stores/count'
import { storeToRefs } from 'pinia'
const store = useCounterStore()
const { count } = storeToRefs(store)
function handleClick() {
count.value = count.value + 2 // 修改的是组件中count的值,该修改会同步到store中的count
}
// 1. 直接通过store.xxx修改
function handleClick1() {
store.count++
}
// 2. $patch 传入对象的方式
function handleClick2() {
store.$patch({
count: store.count + 1,
})
}
// 3. $patch 传入函数的方式 (推荐使用)
function handleClick3() {
store.$patch((state) => {
state.count += 1
})
}
// 4. 直接替换掉$state (推荐使用方式, 重置默认值)
function handleClick4() {
store.$state = {
count: 0,
}
// 恢复成默认值也可以通过 store.$reset()
}
// 5. 通过actions中的函数进行修改 (推荐使用, 多个组件中可以重复使用)
function handleClick5() {
store.increment() // store的actions中编写函数
}
// 函数
// actions: {
// increment() {
// this.count++
// }
// }
4. store.$xxx
4.1 store.$reset()
功能:恢复成初始值
4.2 store.$state
功能:访问或者修改值
4.3 store.$patch
功能:修改值
import { useCounterStore } from '@/stores/count'
const store = useCounterStore()
// 1. 传入函数
store.$patch((state) => {
state.count += 1
})
// 2. 传入对象
store.$patch({
count: store.count + 1,
})
5. getters的使用
5.1 基础使用
export const useCounterStore = defineStore({
id: 'count',
state: () => ({
...
}),
getters: {
doubleCount: (state) => state.count * 2
},
})
// in foo.vue
import { useCounterStore } from '@/stores/count'
const store = useCounterStore()
store.doubleCount // 直接使用
5.2 传参使用
getters: {
// 通过使用高阶函数(函数里面返回函数)
mulitpleNum(state) => {
return (num) => state.count * num
}
},
// 调用时,直接传参即可
store.multipleNum(100)
6. actions的使用
actions: {
increment() {
this.count++
},
change(a: any, ...args: any[]) {
// 通过this可以获取到Pinia实例,那么就能访问到它所有的方法和属性
console.log('this.$state', this.$state)
console.log('this.doubleCount', this.doubleCount)
console.log('this.increment', this.increment)
console.log('a', a) // a 1
console.log('args', args) // args (2) [2, 3]
}
}
// 直接调用, 可以传任意个参数
function handleClickChange() {
store.change(1, 2, 3)
}