pinia 菠萝

安装

npm i pinia

 引入pinia

import {createPinia} from 'pinia'

const store = createPinia()

app.use(store)

我们需要知道存储是使用定义的defineStore()，并且它需要一个唯一的名称，作为第一个参数传递

抽离出去了

export const enum Names {
    Test = 'TEST'
}

创建文件夹 store

import { defineStore } from 'pinia'
import { Names } from './store-namespace'

export const useTestStore = defineStore(Names.Test, {
    // state是一个函数 这里定义初始值
    state:() => {
        return {
            count: 1,
            age: 20,
            name: '张三',
            gender: '男'
        }
    },
    // 类似computed 可以帮我们修饰我们的值
    getters: {

    },
    // 可以操作异步和同步提交state
    actions: {

    }
})

state

state是允许修改值的

 修改多个属性

state通过$patch可以同时修改多个state

 通过原始对象修改整个实例

$state您可以通过将store的属性设置为新对象来替换store的整个状态

但是缺点就是必须修改整个对象的所有属性

解构store

在pinia中是不能使用解构的，因为会失去响应式

let { age, gender, name, count } = store

解决方法：使用storeToRefs

import { storeToRefs} from 'pinia'

let { age, gender, name, count } = storeToRefs(store)

actions

同步

直接调用

import { defineStore } from 'pinia'
import { Names } from './store-namespace'

export const useTestStore = defineStore(Names.Test, {
    // state是一个函数 这里定义初始值
    state:() => {
        return {
            count: 1,
            age: 20,
            name: '张三',
            gender: '男'
        }
    },
    // 类似computed 可以帮我们修饰我们的值
    getters: {

    },
    // 可以操作异步和同步提交state
    actions: {
        setCount() {
            this.count ++
        }
    }
})

template

异步

使用async await 修饰符

import { defineStore } from 'pinia'
import { Names } from './store-namespace'

type Result = {
    name: string
    isChu: boolean
}

const login = (): Promise => {
    return new Promise((resolve, reject) =>{
        setTimeout(() => {
            resolve({
                name: '李四',
                isChu: true
            })
        }, 3000)
    })
}

export const useTestStore = defineStore(Names.Test, {
    // state是一个函数 这里定义初始值
    state:() => {
        return {
            user:{},
            count: 1,
            age: 20,
            name: '张三',
            gender: '男'
        }
    },
    // 类似computed 可以帮我们修饰我们的值
    getters: {

    },
    // 可以操作异步和同步提交state
    actions: {
        async getLoginInfo() {
            const res = await login()
            this.user = res
        }   
    }
})

template

getters

注意：使用箭头函数时不能够使用this this只想已经改变指向undefined 修改值使用state

主要作用类似于computed 数据修饰并且有缓存

getters: {
        newPrice:(state)=>  `$${state.age}`
    },

普通函数可以使用this

getters: {
        newCurrent ():number {
            return ++ this.count
        }
    },

API

$reset 重置

重置state的状态到初始值

state:() => {
        return {
            user:{},
            count: 1,
            age: 20,
            name: '张三',
            gender: '男'
        }
    },

在组件中把state的count属性修改为200， 调用$reset回回到初始的 1

store.count = 200

store.$reset()