Pinia
目录
一、基本使用
二、定义一个Store
三、State
1. 从store 中获取的数据解构后不具备响应式
2. 使用storeToRefs() 可以使解构后的数据具有响应式
3. 读取和写入state
1. 修改state，默认情况下， 可以通过store 实例访问状态来直接读取和写入状态
2. 重置state，调用store 上的$reset()方法将状态重置到其初始值
3. 改变state， 除了直接使用store.counter++修改store，还可以调用$patch 方法。允许同时进行多个更改
4. 替换state， 通过将其$state 属性设置为新对象来替换store 的整个状态
四、getters
1、 基本使用
2、 getters 支持返回一个函数
3、 getters 中用到别的store 中的数据
4、 访问getters
1、 访问当前store 的getters
2、 getters 中访问自己的其他getters
3、 访问其他store 中的getters
五、Actions
一、基本使用
// src/store/index.js
import { createPinia } from 'pinia'
const pinia = createPinia();
export default pinia
// src/store/counter.js
import { defineStore } from 'pinia'
const useCounter = defineStore("counter", {
state: () => ({
count: 99
})
})
export default useCounter
// counter.vue
{{ counterStore.count }}
import useCounter from '@/stores/counter'
const counterStore = useCounter();
二、定义一个Store
- Store是使用defineStore()定义的
- 并且他需要一个唯一名称，作为第一个参数传递：
- 这个name，也称为id，是必要的，pinia使用它来将store连接到devtools 里
- 返回的函数统一使用useX作为命名方案，这是约定的规范
export const useCounter = defineStore("counter", {
state() {
return {
counter: 0
}
}
})三、State
1. 从store 中获取的数据解构后不具备响应式
// home.vue
{{ counterStore.count }}
{{ count }}
import useCounter from '@/stores/counter'
const counterStore= useCounter();
// 解构后不具备响应式
const { count } = counterStore;
function increment() {
counterStore.count++
}2. 使用storeToRefs() 可以使解构后的数据具有响应式
// home.vue
{{ counterStore.count }}
{{ count }}
import { toRefs } from 'vue'
import { storeToRefs } from 'pinia'
import useCounter from '@/stores/counter'
const counterStore= useCounter();
// 都可以是解构后的数据具有响应式
const { count } = toRefs(counterStore);
const { count } = storeToRefs(counterStore);
function increment() {
counterStore.count++
}3. 读取和写入state
1. 修改state，默认情况下， 可以通过store 实例访问状态来直接读取和写入状态
const counterStore = useCounter();
counterStore.counter++;
counterStore.name = "coder"
function changeState() {
counterStore.name = "kobe"
counterStore.age= 18
counterStore.level= 20
} 2. 重置state，调用store 上的$reset()方法将状态重置到其初始值
const counterStore = useCounter()
counterStore.$reset()3. 改变state， 除了直接使用store.counter++修改store，还可以调用$patch 方法。允许同时进行多个更改
const counterStore = useCounter()
counterStore.$patch({
counter: 100,
name: "kobe"
})
function changeState() {
counterStore.$patch({
counter: 100,
name: "kobe"
})
} 4. 替换state， 通过将其$state 属性设置为新对象来替换store 的整个状态
counterStore.$state = {
counter: 1,
name: "why"
}四、getters
1、 基本使用
// src/store/counter.js
import { defineStore } from 'pinia'
const useCounter = defineStore("counter", {
state: () => ({
count: 99
}),
getters: {
//1. 基本使用
doubleCount(state) {
return state.count * 2
},
//2. 一个getter 引用另外一个getter
doubleCountAddOne() {
// this 是store 实例
return this.doubleCount + 1
}
}
})
// home.vue
{{ counterStore.doubleCount }}
{{ counterStore.doubleCountAddOne }}
import useCounter from '@/stores/counter'
const counterStore = useCounter()
2、 getters 支持返回一个函数
// src/store/counter.js
import { defineStore } from 'pinia'
const useCounter = defineStore("counter", {
state: () => ({
friends: [
{ id: 1, name: "why" },
{ id: 2, name: "kobe" },
{ id: 3, name: "james" },
]
}),
getters: {
// getters 也支持返回一个函数
getFriendById(state) {
return function(id) {
for(let i = 0; i < state.friends.length; i++ ) {
const friend = state.friends[i]
if(firend.id === id) {
return friend
}
}
}
}
}
})
// home.vue
{{ counterStore.getFriendById(111)}}
import useCounter from '@/stores/counter'
const counterStore = useCounter()
3、 getters 中用到别的store 中的数据
// src/store/counter.js
import { defineStore } from 'pinia'
import useUser from './user'
const useCounter = defineStore("counter", {
state: () => ({
friends: [
{ id: 1, name: "why" },
{ id: 2, name: "kobe" },
{ id: 3, name: "james" },
]
}),
getters: {
// 在当前getters 中用到别的store 中的数据
showMessage(state) {
// 1. 获取user 信息
const userStore = useUser()
// 2. 将user 中的数据与当前state 中的数据进行拼接
return `name: ${useStore.name} - count: ${state.count}`
}
}
})
// home.vue
{{ counterStore.showMessage}}
import useCounter from '@/stores/counter'
const counterStore = useCounter()4、 访问getters
1、 访问当前store 的getters
const counterStore = useCounter()
console.log(counterStore.fullname)2、 getters 中访问自己的其他getters
// 可以通过this 来访问当前store 实例中的所有其他属性
dobulePlusOne: function(state) {
return this.dobuleCounter * + 1
}3、 访问其他store 中的getters
messgae: function(state) {
const userStore = useUser()
return this.fullname + ":" + userStore.nickname
}五、Actions
// src/store/counter.js
import { defineStore } from 'pinia'
const useCounter = defineStore("counter", {
state: () => ({
count: 99
}),
getters: {
},
actions: {
increment() {
this.count++
},
incrementNum(num) {
this.count += num
}
}
})
// home.vue
{{ counterStore.count}}
import useCounter from '@/stores/counter'
const counterStore = useCounter()
function changeState() {
counterStore.incrementNum(10)
}