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 
<div>{{ counterStore.count }}</div>
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
<div>{{ counterStore.count }}</div>
<div>{{ count }}</div>
<button @click="incrementCount">+1</button>

import useCounter from '@/stores/counter'
const counterStore= useCounter();
// 解构后不具备响应式
const { count } = counterStore;
function increment() {
    counterStore.count++
}

 2. 使用storeToRefs() 可以使解构后的数据具有响应式

// home.vue
<div>{{ counterStore.count }}</div>
<div>{{ count }}</div>
<button @click="incrementCount">+1</button>

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
<div>{{ counterStore.doubleCount }}</div>
<div>{{ counterStore.doubleCountAddOne }}</div>

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
<div>{{ counterStore.getFriendById(111)}}</div>

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
<div>{{ counterStore.showMessage}}</div>

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
<div>{{ counterStore.count}}</div>

import useCounter from '@/stores/counter'
const counterStore = useCounter()

function changeState() {
    counterStore.incrementNum(10)
}